.talk4her

Would you like to react to this message? Create an account in a few clicks or log in to continue.
.talk4her

müzik dinle klip izle indir resim google yetkinforum video download youtube islamiyet ilahi


    html dersleri

    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:46 pm

    HTML'e Giriş

    Kod:
    [b]HTML dosyası nedir?[/b]


               
    [list]
    [*]HTML'in açılımı [b]H[/b]yper [b]T[/b]ext [b]M[/b]arkup
                  [b]L[/b]anguage
                  (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan
                metin"
                denebilir.
    [*]Bir HTML dosyası bir text dosyası olmakla beraber
                [b]markup tags[/b] (işaretlenmiş etiketler) içerir
    [*]Markup
                tag'ler web tarayıcınıza sayfanın [b]nasıl gösterileceğini[/b]
                gösterir.
    [*]Bir HTML dosyasının uzantısı [b]htm[/b] veya [b]html[/b] olmak zorundadır.
    [*]Bir HTML dosyası basit bir text editör ile oluşturulabilir.
    [/list]
               

                [b]Denemek İster misiniz?[/b]


                Eğer Windows kullanıyorsanız not defterini açın.
                Eğer MAC kullanıyorsanız SimpleText programını açın.
                Eğer OSX kullanıyorsanız, TextEdit'i açın ve aşağıdakileri yapın:
                "Format" menüsünü açın ve "Rich Text" yerine "Plain Text" seçeneğini seçin.
                Sonra "Text Edit" menüsünün altında bulunan "Preferences" penceresini açın ve
                "Ignore rich text commands in HTML files" seçeneğini seçin. Eğer bu değişiklikleri
                yapmazsanız HTML dosyasınız büyük ihtimalle çalışmayacaktır!
                Aşağıdaki metini açtığınız editör içerisine yazın:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<html>
    <head>
    <title>Sayfa Başlığı</title>
    </head>
    <body>
    Bu benim ilk sayfam <b>Bu metin koyu</b>
    </body>
    </html>[/td][/tr][/table]
                Dosyayı "sayfam.htm" olarak kaydedin.
                Oluşturduğunuz dosyaya çift tıklayın. Dosya tarayıcınızda açılacaktır.
               

                [b]Örneğin Açıklaması[/b]


                HTML dökümanınızdaki ilk tag (etiket) <html>'dir. Bu etiket
             tarayıcınıza bir HTML dosyasının koşturulacağını söyler. HTML dökümanınızdaki son tag (etiket) </html>'dir. Bu da
             tarayıcınıza
             HTML dosyasının sonunun geldiğini söyler.
                            <head> ve </head> etiketleri arasında kalan kısım başlık
             bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görüntülenmez.
                <title> ve </title> etiketleri arasında kalan kısım dökümanınızın
             başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde
             görüntülenir.
                <body> ve </body> etiketleri arasında kalan kısım,
             tarayıcı
             penceresinde görüntülenecek olan kısımı içerir.
                <b> ve </b> etiketleri arasında kalan kısım ise koyu (bold)
             biçimde gösterilir.
               

                [b]HTML Editörleri Hakkında Not:[/b]


                HTML dosyalarınızı kolay bir şekilde WYSIWYG (what you see is
                what you get), FrontPage veya Dreamweaver ile de
             hazırlayabilirsiniz.
                Bununla beraber, eğer profesyonel anlamda HTML çalışmak
             istşyorsanız mutlaka not defteri (notepad) kullanmanızı tavsiye
             ederiz.
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:47 pm

    HTML Öğeleri

    Kod:

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

                [b]HTML Etiketleri[/b]


               
    [list]
    [*]HTML etiketleri, HTML öğelerini belirtmek için kullanılır.
    [*]HTML
                etiketleri 2 karakter ile sınırlanır. [b]< ve >[/b]
    [*]Bu
                karakterlere [b]grup parantezleri (angle brackets)[/b] denir.
    [*]HTML
                etiketleri çift olarak kullanılır. Örn: <b> Bu metin koyu
                fonttadır. </b>
    [*]Bu çiftlerden birincisine [b]başlama etiketi[/b], ikincisine ise
                [b]bitiş etiketi[/b] denir.
    [*]Başlama ve bitiş etiketleri
                arasında kalan herşeye ise [b]öğe içeriği (element contents)[/b] 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.)
    [/list]
               

                [b]HTML Öğeleri[/b]


                Önceki sayfadaki örneğimizi hatırlayalım:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<html>
    <head>
    <title>Sayfa Başlığı</title>
    </head>
    <body>
    Bu benim ilk sayfam <b>Bu metin koyu</b>
    </body>
    </html>[/td][/tr][/table]
                Bu bir HTML öğesidir:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<b>Bu metin koyu</b>[/td][/tr][/table]
                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.
               
               

                [b]Etiketleri neden küçük harflerle belirtiriz?[/b]


                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.
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:47 pm

    

    Temel HTML Etiketleri

    Kod:

    HTML dilindeki en önemli etiketler, başlıklar, paragraflar ve satır atlama etiketleridir.
               
    HTML'i öğrenmenin en iyi yolu örneklerle çalışmaktır.
             Sizin için çok kullanışlı bir HTML deneme editörü hazırladık. Bu
             editör ile kendi kaynak kodlarınızı girip anında test edebilirsiniz.
               

                [b]Kendin Dene - Örnekler[/b]


                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_basic]Çok basit bir HTML dökümanı[/url]
    Bu örnek en az HTML
             etiketleri kullanılarak oluşturulmuş çok basit bir HTML dökümanıdır.
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_paragraphs1]Basit paragraflar[/url]
    Bu örnekle paragrafların
             nasıl oluşturulduğunu görebilirsiniz.
               

                [b]Başlıklar[/b]


                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.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<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>[/td][/tr][/table]
                HTML dili otomatik olarak başlık etiketlerinin öncesinde ve
             sonrasında bir satır atlar.
               

                [b]Paragraflar[/b]


                Paragraflar <p> etiketi ile belirtilir.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<p>Bu bir paragraf</p>
    <p>Bu da başka bir paragraf</p>[/td][/tr][/table]
                HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve
             sonrasında bir satır atlar.
               

                [b]Etiketleri kapatmayı unutmayın![/b]


                Bir önceki örnekte paragrafın </b> etiketi ile bittiğini
             gördünüz:
                [table class="ex" id="table1" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<p>Bu bir paragraf
    <p>Bu da başka bir paragraf
                [/td][/tr][/table]
                Ç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 [b]hiçbir[/b] etiketi atlamanıza izin vermeyecektir.
               

                [b]Satır atlama[/b]


                Satır atlamak için <br> etiketi kullanılır. Ancak bu etiketin
             yeni bir paragraf açmadığını da unutmayınız.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<p>Bu <br>bir <br>çok satırlı paragraftır.</p>[/td][/tr][/table]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_paragraphs]Kendin dene![/url]
                <br> etiketi boş bir etikettir. </br> gibi bir bitiş
             etiketi yoktur.
               

                [b]<br> mi <br /> mi?[/b]


                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.
               

                [b]HTML içinde açıklama (yorum) satırları yaratmak[/b]


                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.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<!-- Bu bir açıklama -->[/td][/tr][/table]
               

                [b]Temel Notlar - Yararlı İpuçları[/b]


                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.)
               

                [b]Temel HTML Etiketleri[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                Etiket (Tag)
                    Açıklama[/tr]
                  [tr]                [td]<html>[/td]
                    [td]Bir HTML dökümanını belirtir[/td][/tr]
                  [tr]                [td]<body>[/td]
                    [td]Dökümanın görüntülenecek kısmını berlitir.[/td][/tr]
                  [tr]                [td]<h1> to
                      <h6>[/td]
                    [td]Başlıkları belirtir.[/td][/tr]
                  [tr]                [td]<p>[/td]
                    [td]Bir paragraf belirtir[/td][/tr]
                  [tr]                [td]<br>[/td]
                    [td]Boş bir satır bırakır.[/td][/tr]
                  [tr]                [td]<hr>[/td]
                    [td]Sayfada yatay bir çizgi çizer[/td][/tr]
                  [tr]                [td]<!-->[/td]
                    [td]Yorum satırı olduğunu belirtir.[/td][/tr][/table]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:48 pm

    HTML Parametreler (Nitelikler)

    Kod:

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

                [b]HTML Etiket Nitelikleri[/b]

    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.
               

                [b]Parametre Örneği[b] 1:[/b][/b]


                <h1> başlık belirtir.
                <h1 align="center"> başlık belirtmesinin yanında, metinin
             ortalanacağını da belirtir.
                         [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_header]Kendin dene:
             Ortaya hizalanmış metin[/url]
               

                [b]Parametre Örneği[b] 2:[/b][/b]


                <body> HTML'in body kısmını belirtir.
                <body bgcolor="yellow"> Body kısmını belirtmekle beraber,
             arkaplan renginin de sarı olacağını belirtir.
                         [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_bodybgcol]Kendin dene: Arkaplan rengi[/url]
               

                [b]Değerleri (Value) Daima Tırnak İçerisine Alın[/b]


                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'
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:49 pm

    HTML Metin Biçimlendirme

    Kod:

    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.
               

                [b]Örnekler[/b]


                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_formattingch]Metin Biçimlendirme[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_pre]Biçimlendirilmemiş Metin[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_computeroutput]"Programlama dili biçimlendirmeli" etiketler[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_address]Adres[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_abbr]Kısaltmalar[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_bdo]Metin Yönlendirme[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_q]Alıntılar[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_del]Üstü ve Altı Çizili Metinler[/url]
               

                [b]HTML Kaynak Kodları Nasıl Görüntülenir?[/b]


                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.
               

                [b]Metin Biçimlendirme Etiketleri[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                Tag
                    Açıklama[/tr]
                  [tr]                [td]<b>[/td]
                    [td]Koyu metin[/td][/tr]
                  [tr]                [td]<big>[/td]
                    [td]Büyük metin[/td][/tr]
                  [tr]                [td]<em>[/td]
                    [td]Vurgulanmış metin[/td][/tr]
                  [tr]                [td]<i>[/td]
                    [td]İtalik metin[/td][/tr]
                  [tr]                [td]<small>[/td]
                    [td]Küçük metin[/td][/tr]
                  [tr]                [td]<strong>[/td]
                    [td]Güçlü metin[/td][/tr]
                  [tr]                [td]<sub>[/td]
                    [td]Alt indis metini[/td][/tr]
                  [tr]                [td]<sup>[/td]
                    [td]Üst indis metini[/td][/tr]
                  [tr]                [td]<ins>[/td]
                    [td]Altı çizili metin[/td][/tr]
                  [tr]                [td]<del>[/td]
                    [td]Üstü çizili metin[/td][/tr]
                  [tr]                [td]<s>[/td]
                    [td class="deprecated"]Önemsiz etiket, bunun yerine <del>
                kullanınız.[/td][/tr]
                  [tr]                [td]<strike>[/td]
                    [td class="deprecated"]Önemsiz etiket, bunun yerine <del>
                kullanınız.[/td][/tr]
                  [tr]                [td]<u>[/td]
                    [td class="deprecated"]Önemsiz etiket, bunun yerine styles
                kullanınız.[/td][/tr][/table]
                [b]"Programlama Dilleri" Etiketleri[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                Tag
                    Açıklama[/tr]
                  [tr]                [td]<code>[/td]
                    [td]Programlama dili metini[/td][/tr]
                  [tr]                [td]<kbd>[/td]
                    [td]Klavye metini[/td][/tr]
                  [tr]                [td]<samp>[/td]
                    [td]Örnek bilgisayar kodu metini[/td][/tr]
                  [tr]                [td]<tt>[/td]
                    [td]Tele tip metin[/td][/tr]
                  [tr]                [td]<var>[/td]
                    [td]Değişken[/td][/tr]
                  [tr]                [td]<pre>[/td]
                    [td]Biçimlendirilmemiş metin.[/td][/tr]
                  [tr]                [td]<listing>[/td]
                    [td class="deprecated"]Önemsiz etiket, bunun yerine <pre>
                kullanınız.[/td][/tr]
                  [tr]                [td]<plaintext>[/td]
                    [td class="deprecated"]Önemsiz etiket, bunun yerine <pre>
                kullanınız.[/td][/tr]
                  [tr]                [td]<xmp>[/td]
                    [td class="deprecated"]Önemsiz etiket, bunun yerine <pre>
                kullanınız.[/td][/tr][/table]
                [b]Alıntılar ve Açıklamalar İle İlgili Etiketler[/b]


               
                 
                  [table class="ex" width="100%" border="1" cellspacing="0"][tr]                Tag
                    Description[/tr]
                  [tr]                [td]<abbr>[/td]
                    [td]Kısaltma[/td][/tr]
                  [tr]                [td]<acronym>[/td]
                    [td]Baş harfleri ile kısaltma[/td][/tr]
                  [tr]                [td]<address>[/td]
                    [td]Adres öğesi[/td][/tr]
                  [tr]                [td]<bdo>[/td]
                    [td]Metin yönü[/td][/tr]
                  [tr]                [td]<blockquote>[/td]
                    [td]Uzun alıntı[/td][/tr]
                  [tr]                [td]<q>[/td]
                    [td]Kısa alıntı[/td][/tr]
                  [tr]                [td]<cite>[/td]
                    [td]Alıntı[/td][/tr]
                  [tr]                [td]<dfn>[/td]
                    [td]Tanımlama terimi[/td][/tr][/table]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:50 pm

    HTML Özel Karakterler

    Kod:

    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.
               

                [b]Özel Karakterler[/b]


                Bir özel karakterler bloğu 3 kısımdan oluşur:
    1-) "&" işareti 
             
    2-) "#" işareti ve arkasından kod numarası veya direkt ismi
    3-)
             Sonuncu olarak ta ";" işareti.
                HTML dökümanı içinde  bu tip karakterleri görüntülemek için
             [b]<[/b] veya [b]<[/b] 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 [b]dikkat[/b]
             ediniz
                Örnek: [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_entities]Özel Karakterler[/url]
               

                [b]Birden Fazla Boşluk Bırakabilmek[/b]


                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   özel
             karaktlerini kullanınız.
               

                [b]En Çok Kullanılan Özel Karakterler[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                Sonuç
                    Açıklama
                    Özel karakterleri
                    Numaralı Hali[/tr]
                  [tr]                [td] [/td]
                    [td]Fazladan boşluk[/td]
                    [td]&nbsp;[/td]
                    [td] [/td][/tr]
                  [tr]                [td]<[/td]
                    [td]Küçüktür[/td]
                    [td]<[/td]
                    [td]<[/td][/tr]
                  [tr]                [td]>[/td]
                    [td]Büyüktür[/td]
                    [td]>[/td]
                    [td]>[/td][/tr]
                  [tr]                [td]&[/td]
                    [td]Ve[/td]
                    [td]&[/td]
                    [td]&[/td][/tr]
                  [tr]                [td]"[/td]
                    [td]Alıntı[/td]
                    [td]"[/td]
                    [td]"[/td][/tr]
                  [tr]                [td]'[/td]
                    [td]apostorof [/td]
                    [td]' (IE'de çalışmaz)[/td]
                    [td]'[/td][/tr][/table]
                [b]Bazı Başka Özel Karakterler[/b]


               
                 
                  [table class="ex" width="100%" border="1" cellspacing="0"][tr]                Result
                    Description
                    Özel karakterleri
                    Numaralı Hali[/tr]
                  [tr]                [td]¢[/td]
                    [td]Cent[/td]
                    [td]¢[/td]
                    [td]¢[/td][/tr]
                  [tr]                [td]£[/td]
                    [td]Pound[/td]
                    [td]£[/td]
                    [td]£[/td][/tr]
                  [tr]                [td]¥[/td]
                    [td]Yen[/td]
                    [td]¥[/td]
                    [td]¥[/td][/tr]
                  [tr]                [td]€[/td]
                    [td]Euro[/td]
                    [td]€[/td]
                    [td]€[/td][/tr]
                  [tr]                [td]§[/td]
                    [td]Section[/td]
                    [td]§[/td]
                    [td]§[/td][/tr]
                  [tr]                [td]©️[/td]
                    [td]Copyright[/td]
                    [td]©[/td]
                    [td]©[/td][/tr]
                  [tr]                [td]®️[/td]
                    [td]Kayıtlı marka[/td]
                    [td]®[/td]
                    [td]®[/td][/tr]
                  [tr]                [td]×[/td]
                    [td]Çarpma[/td]
                    [td]×[/td]
                    [td]×[/td][/tr]
                  [tr]                [td]÷[/td]
                    [td]Bölme[/td]
                    [td]÷[/td]
                    [td]÷[/td][/tr][/table]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:51 pm

    HTML Bağlantılar (Links)

    Kod:

    HTML başka sayfalara kendi üzerinden bağlantı (link)
             kurmak için hyperlink (çoklu bağlantı) özelliğini kullanılır.
               

                [b]Örnekler[/b]


                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_links]Link oluşturma[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_imglink]Bir resime link vermek[/url]
               

                [b]<a> Etiketi ve href parametresi[/b]


                [b]HTML [/b]başka bir dökümana link oluşturmak için <a> etiketini
             kullanır.
                Kullanım biçimi:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<a href="url">Görüntülenecek Metin</a>[/td][/tr][/table]
                Bir örnek:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<a href="http://www.htmldersleri.org/">Kodlayın, Tıklayın, Görün...</a>[/td][/tr][/table]
                Bu örnek tarayıcınızda aşağıdaki gibi görünecektir:
                [url=http://www.htmldersleri.org/]Kodlayın, Tıklayın, Görün...[/url]
               

                [b]Hedef (target) Parametresi[/b]


                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.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<a href="http://www.htmldersleri.org/"
    target="_blank">Kodlayın, Tıklayın, Görün...</a>[/td][/tr][/table]
               

                [b]<a> Etiketi ve Name Parametresi[/b]


                Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra
             direkt geçiş yapılabilir.
                Kullanım Biçimi:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<a name="label">Görüntülenecek Metin</a>[/td][/tr][/table]
                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:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<a name="ipucu">Yararlı Bilgiler</a>[/td][/tr][/table]
                İpucu kısmına direkt link vermek için, URL'nin sonuna #ipucu
             yazınız:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<a href="http://www.htmldersleri.org/ornekler/html_links.htm#ipucu">
    Yararlı İpuçları</a>[/td][/tr][/table]
                Dosya ismi kullanmadan o dosya içerisinde bir yere geçmek:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<a href="#ipucu">Yararlı İpuçları</a>[/td][/tr][/table]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:52 pm

    

    HTML Çerçeveler (Frames)

    Kod:

    Çerçeveler sayesinde aynı tarayıcı penceresinde
             birden fazla HTML dökümanı görüntüleyebilirsiniz.
               

                [b]Örnekler[/b]


                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_frame_cols]Dikey Çerçeveler[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_frame_rows]Yatay Çerçeveler[/url]
               

                [b]Çerçeveler[/b]


                Ç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ı:
               
    [list]
    [*]Web geliştiricilerin birden fazla HTML dökümanını takip etmesi
                zordur.
    [*]İstenilen sayfanın yazıcıya gönderilmesi zordur.
    [/list]
               

                [b]Frameset Etiketleri[/b]


               
    [list]
    [*]<frameset> pencerenin hangi biçimde çerçevelere
                ayrılacağını belirler.
    [*]Her frameset satır (rows) veya sütun (cols)
                olarak belirlenir
    [/list]
               

                [b]Frame Etiketi[/b]


               
    [list]
    [*]<frame> etiketi, her bir çerçevede hangi HTML
                dökümanının görüntüleneceğini belirtir.
    [/list]
                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:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<frameset cols="25%,75%">
      <frame src="frame_a.htm">
      <frame src="frame_b.htm">
    </frameset>[/td][/tr][/table]
                [b]Not:[/b] 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%,*").

               

                [b]Temel Notlar - Yararlı İpuçları[/b]


                Çerçevelerde görünebilir kenarlıklar vardır. Kullanıcı bunları
             sürükleyerek yeniden boyutlandırabilir.Bunu önlemek için [b]noresize="noresize"[/b]
             parametrelerini  [b]<frame>[/b] etiketi içine
             yazabilirsiniz.
                <noframes> etiketini döküman içerisine eklerseniz,
             tarayıcınız çerçeve özelliğini desteklemez hale gelir.
                [b]Önemli:[/b] <body></body>
                etiketlerini <frameset></frameset> etiketleri ile
             beraber kullanamazsınız!
               

                [b]Frame Etiketleri[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                Etiket
                    Açıklama[/tr]
                  [tr]                [td]<frameset>[/td]
                    [td]Frame ayarlarını belirtir.[/td][/tr]
                  [tr]                [td]<frame>[/td]
                    [td]Alt pencere (çerçeve) belirtir.[/td][/tr]
                  [tr]                [td]<noframes>[/td]
                    [td]Frame desteğinin kullanılmamasını sağlar.[/td][/tr]
                  [tr]                [td]<iframe>[/td]
                    [td]İç frame belirtir.[/td][/tr][/table]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:53 pm

    HTML Tablolar (Tables)

    Kod:

    HTML ile tablolar oluşturabilirsiniz.
               

                [b]Örnekler[/b]


                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_tables]Tablolar[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_table_borders]Tablo Kenarlıkları[/url]

               

                [b]Tablolar[/b]


                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 class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<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>[/td][/tr][/table]
                Çıktısı aşağıdaki gibi olacaktır:
                [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]
               

                [b]Tablolar ve Kenarlık (border) Parametresi[/b]


                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 class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<table border="1">
    <tr>
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
    </tr>
    </table>[/td][/tr][/table]
               

                [b]Tablolarda Başlıklar[/b]


                Başlıklar <th> etiketi ile belirtilir.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<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>[/td][/tr][/table]
                Çıktısı:
                [table border="1"]                            [tr]                Başlık
                    Başka Başlık[/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]
               

                [b]Bir Tabloda Boş Hücreler[/b]


                Veri içermeyen hücreler bir çok tarayıcıda görüntülenmezler.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<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>[/td][/tr][/table]
                Çıktısı:
                [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]
                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, ( ) özel karakterlerini boş hücre
             içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<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>[/td][/tr][/table]
                Çıktısı:
                [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]
               


                [b]Tablo Etiketleri[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                Etiketi
                    Açıklama[/tr]
                  [tr]                [td]<table>[/td]
                    [td]Tablo[/td][/tr]
                  [tr]                [td]<th>[/td]
                    [td]Tablo başlığı[/td][/tr]
                  [tr]                [td]<tr>[/td]
                    [td]Satır[/td][/tr]
                  [tr]                [td]<td>[/td]
                    [td]Hücre[/td][/tr]
                  [tr]                [td]<caption>[/td]
                    [td]Manşet[/td][/tr]
                  [tr]                [td]<colgroup>[/td]
                    [td]Hücre grupları[/td][/tr]
                  [tr]                [td]<col>[/td]
                    [td]Sütun genişliği[/td][/tr]
                  [tr]                [td]<thead>[/td]
                    [td]Tablo başı[/td][/tr]
                  [tr]                [td]<tbody>[/td]
                    [td]Tablo body özelliği[/td][/tr]
                  [tr]                [td]<tfoot>[/td]
                    [td]Tablonun en alt kısmı[/td][/tr][/table]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:53 pm

    HTML Listeleme (Lists)

    Kod:

    HTML, sıralı, sırasız ve tanımlama listelerini
             destekler.
               

                [b]Örnekler[/b]


                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_lists4]Sırasız Liste[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_lists]Sıralı Liste[/url]
               

                [b]Sırasız Liste[/b]


                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.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<ul>
    <li>Kahve</li>
    <li>Süt</li>
    </ul>[/td][/tr][/table]
                Çıktısı:
               
    [list]
    [*]Kahve
    [*]Süt
    [/list]
                Bir liste madde içerisine paragraflar, resimler, linkler, başka
             listeler ve satır boşlukları koyabilirsiniz.
               

                [b]Sıralı Listeler[/b]


                Maddeler rakamlar ile listelenir. Sıralı listeleme <ol>
             etiketi ile başlar. Her madde de  <li> etiketi ile başlar.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<ol>
    <li>Kahve</li>
    <li>Süt</li>
    </ol>[/td][/tr][/table]
                Çıktısı:
                [list=1]
    [*]Kahve
    [*]Süt
    [/list]
               

                [b]Tanımlama Listeleri[/b]


                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.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<dl>
    <dt>Kahve</dt>
    <dd>Koyu sıcak içecek</dd>
    <dt>Süt</dt>
    <dd>Beyaz soğuk içecek</dd>
    </dl>[/td][/tr][/table]
                Çı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.
               

                [b]Listeleme Etiketleri[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                Etiket
                    Açıklama[/tr]
                  [tr]                [td]<ol>[/td]
                    [td]Sıralı liste[/td][/tr]
                  [tr]                [td]<ul>[/td]
                    [td]Sırasız liste[/td][/tr]
                  [tr]                [td]<li>[/td]
                    [td]Liste maddesi[/td][/tr]
                  [tr]                [td]<dl>[/td]
                    [td]Tanımlama listesi[/td][/tr]
                  [tr]                [td]<dt>[/td]
                    [td]Terim tanımı[/td][/tr]
                  [tr]                [td]<dd>[/td]
                    [td]Tanım açıklaması[/td][/tr]
                  [tr]                [td]<dir>[/td]
                    [td class="deprecated"]Önemsiz etiketi. Yerine <ul> kullanınız.[/td][/tr]
                  [tr]                [td]<menu>[/td]
                    [td class="deprecated"]Önemsiz etiketi. Yerine <ul> kullanınız.[/td][/tr][/table]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:54 pm

    HTML Form Oluşturma

    Kod:

    HTML Formları kullanıcının klavye ile girdiği
             bilgileri işlemek için kullanılır.
               

                [b]Örnekler[/b]


                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_input]Metin Alanları[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_inputpassword]Şifreli Giriş Alanları[/url]
               
               

                [b]Formlar[/b]


                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:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<form>
      <input>
      <input>
    </form>[/td][/tr][/table]
               

                [b]Giriş (Input)[/b]


                En çok kullanılan form etiketi <input> etiketidir.
                [b]Metin Alanları[/b]


                Kullanıcının rakam veya harf girmesini istediğiniz yerlerde bunu
             kullabilirsiniz.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<form>
    Adınız:
    <input type="text" name="isim">
    <br>
    Soyadınız:
    <input type="text" name="soyad">
    </form>[/td][/tr][/table]
                Çı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. 
                [b]Seçenek Butonları (Radio Buttons)[/b]


                Kullanıcının bir çok seçenek içinden sadece bir tanesini
             seçebilmesini istediğiniz zaman bunu kullanırsınız.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<form>
    <input type="radio" name="Cinsiyet" value="Erkek"> Erkek
    <br>
    <input type="radio" name="Cinsiyet" value="Kadın"> Kadın
    </form>[/td][/tr][/table]
                Çıktısı:
                Erkek
               
     Kadın
                [b]Kontrol kutuları (Checkboxes)[/b]


                Kullanıcının, sunulan seçenekler içinden istediği kadar seçmesini
             sağlamak için bunu kullanabilirsiniz.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<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>[/td][/tr][/table]
                Çıktısı:
                Bir bisikletim var: 
    Bir arabam var: 
    Bir uçağım var: 
               

                [b]Formlarda "Action" Parametresi ve "Submit" Butonu[/b]


                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.
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<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>[/td][/tr][/table]
                Çı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.
               
               

                [b]Form Etiketleri[/b]


               
                 
                  [table class="ex" width="100%" border="1" cellspacing="0"][tr]                Etiket
                    Açıklama[/tr]
                  [tr]                [td]<form>[/td]
                    [td]Form[/td][/tr]
                  [tr]                [td]<input>[/td]
                    [td]Giriş alanı[/td][/tr]
                  [tr]                [td]<textarea>[/td]
                    [td]Çok satırlı metin giriş alanı[/td][/tr]
                  [tr]                [td]<label>[/td]
                    [td]Etiket[/td][/tr]
                  [tr]                [td]<fieldset>[/td]
                    [td]Alanların ayarlarının nasıl olacağını belirtir.[/td][/tr]
                  [tr]                [td]<legend>[/td]
                    [td]Manşet[/td][/tr]
                  [tr]                [td]<select>[/td]
                    [td]Açılabilir liste (combobox)[/td][/tr]
                  [tr]                [td]<optgroup>[/td]
                    [td]Seçenek kutusu grubu[/td][/tr]
                  [tr]                [td]<option>[/td]
                    [td]Açılabilir liste içindeki maddeleri belirtir.[/td][/tr]
                  [tr]                [td]<button>[/td]
                    [td]Buton[/td][/tr]
                  [tr]                [td]<isindex>[/td]
                    [td class="deprecated"]Önemsiz. Bunun yerine <input>
                     etiketini kullanınız.[/td][/tr][/table]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:55 pm

    HTML Resimler

    Kod:

    HTML dökümanı içerisinde resim görüntüleyebilirsiniz.
               

                [b]Örnekler[/b]


                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_images]Resim Eklemek[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_images2]Başka sitelerden/klasörlerden Resim Eklemek[/url]

               

                [b]Resim "<img>" Etiketi ve "src" Parametresi [/b]


                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
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<img src="resim yolu">[/td][/tr]
                    [tr]                [td]<img src="dosyalar/banner.jpg">[/td][/tr]
                    [tr]                [td]<img src="http://www.htmldersleri.org/dosyalar/banner.jpg">[/td][/tr]
                    [/table]
               

                [b]"Alt" Parametresi [/b]


                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.

                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<img src="home.gif" alt="Ana Sayfa">[/td][/tr][/table]
                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.
               

                [b]Temel Notlar - Yararlı İpuçları[/b]


                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!
               

                [b]Image Etiketleri[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                Etiket
                    Açıklama[/tr]
                  [tr]                [td]<img>[/td]
                    [td]Resim[/td][/tr]
                  [tr]                [td]<map>[/td]
                    [td]Bir resimden alınacak belirli bir bölge.[/td][/tr]
                  [tr]                [td]<area>[/td]
                    [td]Bir resimde belirlenmiş olan bir bölgenin tıklanabilir bölge
                ölçüsü.[/td][/tr][/table]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:56 pm

    HTML Arka Plan

    Kod:

    İyi bir arka plan tasarımı, bir web sitesinin
             gerçekten çok iyi görünmesini sağlayabilir.
               

                [b]Örnekler[/b]


                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_back_good]İyi Bir Arkaplan ve Metin Rengi[/url]
                [url=http://www.htmldersleri.org/ornekler/dene.php?dosyaadi=tryhtml_back_bad]Kötü Bir Arkaplan ve Metin Rengi[/url]
               
               

                [b]Arka Plan[/b]


                <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.
                [b]Bgcolor[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<body bgcolor="#000000">
    <body bgcolor="rgb(0,0,0)">
    <body bgcolor="black">[/td][/tr][/table]
                [b]Background[/b]


                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                [td]<body background="ornekler/background.jpg">
    <body background="http://www.fikrin.net/grafik/logo.jpg">[/td][/tr][/table]
                [b]Not: [/b]Eğer bir arka plan resimi kullanmak isterseniz
             aşağıdaki soruları aklınıza getirmeyi unutmayınız.
               
    [list]
    [*]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?
    [/list]
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 9:58 pm

    HTML Renkler

    Kod:
    [b]
               
    [list]
    [*]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.
    [*]Işık renklerinde
             ana renkler kırmızı yeşil ve mavidir.
    [/list][/b]
               

                [b]Renk Değerleri[/b]


                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:
                [table class="ex" width="100%" border="1" cellspacing="0"]                            [tr]                Renk
                    HEX Değeri
                    RGB Değeri[/tr]
                  [tr]                [td bgcolor="#000000"] [/td]
                    [td]#000000[/td]
                    [td]rgb(0,0,0)[/td][/tr]
                  [tr]                [td bgcolor="#ff0000"] [/td]
                    [td]#FF0000[/td]
                    [td]rgb(255,0,0)[/td][/tr]
                  [tr]                [td bgcolor="#00ff00"] [/td]
                    [td]#00FF00[/td]
                    [td]rgb(0,255,0)[/td][/tr]
                  [tr]                [td bgcolor="#0000ff"] [/td]
                    [td]#0000FF[/td]
                    [td]rgb(0,0,255)[/td][/tr]
                  [tr]                [td bgcolor="#ffff00"] [/td]
                    [td]#FFFF00[/td]
                    [td]rgb(255,255,0)[/td][/tr]
                  [tr]                [td bgcolor="#00ffff"] [/td]
                    [td]#00FFFF[/td]
                    [td]rgb(0,255,255)[/td][/tr]
                  [tr]                [td bgcolor="#ff00ff"] [/td]
                    [td]#FF00FF[/td]
                    [td]rgb(255,0,255)[/td][/tr]
                  [tr]                [td bgcolor="#c0c0c0"] [/td]
                    [td]#C0C0C0[/td]
                    [td]rgb(192,192,192)[/td][/tr]
                  [tr]                [td bgcolor="#ffffff"] [/td]
                    [td]#FFFFFF[/td]
                    [td]rgb(255,255,255)[/td][/tr][/table]
               

                [b]W3C Standard Color Names[/b]


                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.
               

                [b]Ana Renklerin Çaprazlanması İle Oluşturulmuş Renkler[/b]


                Yaklaşık 150 adet en çok kullanılan tarayıcılar tarafından
             desteklenen renk isimleri (İngilizce):
                [url=http://www.htmldersleri.org/index.php?getir=html_colornames]Görüntüle[/url]
               

                [b]Çaprazlanmış Renk Değerleri[/b]


                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:
    AsiRuH
    AsiRuH
    yönetici
    yönetici


    Erkek
    mesaj sayısı : 9861
    Yaş : 36
    İş/meslek : xxxxx
    Kayıt tarihi : 27/09/08

    html dersleri Empty Geri: html dersleri

    Mesaj  AsiRuH Paz Ara. 14, 2008 10:00 pm




    • 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.
    • 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:
    Renk HEX Değeri RGB Değeri
    #000000 rgb(0,0,0)
    #FF0000 rgb(255,0,0)
    #00FF00 rgb(0,255,0)
    #0000FF rgb(0,0,255)
    #FFFF00 rgb(255,255,0)
    #00FFFF rgb(0,255,255)
    #FF00FF rgb(255,0,255)
    #C0C0C0 rgb(192,192,192)
    #FFFFFF rgb(255,255,255)

      Forum Saati Perş. Mayıs 09, 2024 6:44 am