Html Dersi

+ Yorum Gönder
Webmaster ve HTML-PHP-ASP-JAVA Bölümünden Html Dersi ile ilgili Kısaca Bilgi
  1. 1
    s_onur
    Emekli
    Reklam

    Html Dersi

    Reklam



    Html Dersi

    Forum Alev
    tasarımın temelleri :
    WEB SAYFASI TASARIMIN TEMELLERİ
    EVET, nihayet bir Web sunucusunda kendinize ait bir alan elde ettiniz ve Web aracılığı ile başkalarına söyleyecek çok şeyiniz var. Peki bir Web sayfasını tasarlamaya nereden başlamalı? Öğrenmeniz gereken temel dilin HTML (Hypertext Mark-up Language) olduğunu belirtmiştik. Bu dil aslında, normal metni, hypertext adı verilen ve web browser'larla görüntülenmeye uygun metin haline dönüştüren bir kodlar silsilesi. Diğer bir deyişle HTML, basit bir belgeyi alıp içine bu belgenin sayfa düzeni ve metin biçimleri ile ilgili bilgiler yerleştirmenin ve bu belgeyi diğer metin (ve/veya grafik) içerikli belgelerle ilişkilendirmenin yoludur.
    Web'de yayınlanmak üzere belgeler hazırlarken, HTML kodları ile metinlerinize vereceğiniz biçimler belirteç (İngilizce adı ile mark-up veya tag) adını taşır. Bunlar metnin çeşitli yerlerinde, ' <' ve ' >' şeklindeki parantezlerin arasına yerleştirilen kodlardır. Bunlar arasında diğer Internet sayfalarına (veya URL'lere) geçişi sağlayan ‘link'ler de bulunabilir.HTML bir dil olarak adlandırılsa da, HTML belgelerinin (kısaca Web sayfalarının) hazırlanması klasik bilgisayar dilleri ile programlama yapmaya pek benzemez. Daha çok kelime işlemcilerle çalışmaya benzer. Ancak burada yazıtipi büyüklüğünü ayarlamak, bir metni kalın veya italik yapmak için menü komutlarını kullanmaz, bunları metnin başına ve sonuna koyduğunuz kodlarla belirlersiniz. (WordPerfect ile çalışanlar bunu kolayca anlayacaktır, çünkü bu kelime işlemcide yazdığınız metinlerin biçim kodlarını da Reveal Codes komutu ile görüntüleyebilirsiniz.) Metni ve bu kodları nerede yazacağız diyorsanız, başlangıçta Windows'un Not Defteri fazlasıyla yeterli olacaktır.

    Bu kısa girişten sonra bir örnek ile HTML kodlarını kullanmaya başlayalım. Diyelim ki elimizde şöyle bir metin var:

    Düşünde bile göremez işler,
    Düşlerin gördüğü işleri.
    Bu metni HTML kodları ile şöyle yazarsak:
    <B>Düşünde</B> bile göremez,
    <B>işler</B>,<BR><B>Düşlerin</B> gördüğü <B>işleri</B>.<BR>

    Web browser'da aşağıdaki gibi bir görüntü elde ederiz:
    Düşünde bile göremez işler,

    Düşlerin gördüğü işleri.

    Bu örnekte <B> ve </B> belirteçleri Web browser'a aralarındaki metni kalın (bold) göstermesini söyler. <BR> belirteci ise satır başı verilmesi gerektiğini. Bunlar gibi başka pek çok belirteç var ama güzel bir Web sayfası tasarlamak için başlangıçta öğrenmeniz gereken belirteç sayısı 30-40 kadardır. Profesyonelleştikçe yeni belirteçler kullanmaya başlayabilirsiniz.

    Bir de yazdıklarınızın düzgün görünmesi için her html dosyasının başında:<html> <head> <title> </title> </head><body>

    sonunda:

    </body></html>

    belirteçlerinin bulunmasına dikkat edin. Bunlar sayfanın başını sonunu belirlemek için gerekli belirteçlerdir. Koymazsanız, Web browser'ınızda metin belirteçleri ile birlikte görünebilir.Bu örnekteki belirteçleri kendiniz denemek istiyorsanız, Not Defteri'ne istediğiniz metni bu belirteçleri kullanarak girin. Belgeye bir isim ve htm soyadını ('te html soyadını da kullanabilirsiniz) vererek kaydedin. Sisteminize bir Web browser yüklü ise htm soyadlı bu belgenin üzerine çift tıkladığınızda browser açılacak ve metniniz biçimlendirilmiş haliyle ekrana geelcek.

    HAYDİ BİR WEB SAYFASI YAPALIM
    HTML dilini öğrenmenin en kolay yolu, deneme yanılma ile web sayfaları hazırlayarak bu sayfaları web tarayıcısı ile kontrol etmek, hataları düzelterek ilerlemektir. Ayrıca bilmediğiniz kodların nasıl kullanıldığını öğrenmek için Internet bağlantınız varsa varolan HTML sayfalarını web tarayıcınızın kaydetme seçeneğini kullanarak sabit diske kaydedip herhangi bir metin editörü kullanarak açıp inceleyebilirsiniz. Şimdi adım adım bir web sayfası hazırlayalım. Adım 1. Pencere Başlığının, arka planın belirlenmesi ve renkler. Her web sayfasının bir başlığı olmalıdır. Bu başlık web tarayıcısının başlık çubuğunda görüntülenecektir. Bu iş için <title> tag'ı kullanılır.
    <title> ve </title>

    tag'ları arasına yazacağınız metin web sayfasının başlığı olarak görüntülenecektir. <title> tag'ı aşağıdaki gibi kullanılır. <title>Bu benim ilk denemem!</title>Web sayfalarının arka planını da istediğiniz gibi ayarlayabilirsiniz. Bu aşamada iki adet seçeneğiniz var. Birincisi boş bir arka plan kullanarak bu arka planın rengini ayarlamak, ikincisi ise bir resim dosyasındaki resmi alıp web sayfasının arka planına ' döşemek'. Bu işlemi aynen 'in masaüstündeki duvar kağıdına benzetebiliriz. Önce boş bir arka planı renklendirmeyi görelim. Web sayfasının arka planının rengi <body> tag'ını kullanarak değiştirilir. Default arka plan rengi gridir. Arka plan rengini örneğin beyaz yapmak için body tag'ını

    <body bgcolor='white'>veya <body bgcolor="#FFFFFF">

    şeklinde kullanabilirsiniz. Birinci seçenekte rengin İngilizce ismi, ikinci seçenekte ise aynı rengin RGB cinsinden renk kodu hexadecimal (onaltılı sayı sistemi) olarak verilmektedir. Eski tarihli browser'lar renk isimlerini algılayamazlar, bu yüzden sayfalarınızda renklerin onaltılı sayı sistemi kodlarını kullanmak daha hayırlıdır. Yan tarafta gördüğünüz tabloda, web sayfalarının arka planlarında kullanılabilecek olan temel renkler isim ve sayı kodu olarak listelenmiştir. Onaltılı sayıların RGB kombinasyonları ile oynayarak istediğiniz rengi web sayfası arka plan rengi olarak belirleyebilirsiniz.

    Bir Web sayfasının arka planına bir resim döşeyebilirsiniz. Bu işlem için ilk önce elinizde bir resim dosyası olması gerekir. Web sayfalarında kullanılabilecek bütün resimler JPG veya GIF formatında olmalıdır. Web okulunu hazırlarken elinizde bir resim düzenleme programının olduğunu ve JPG veya GIF formatındaki dosyalarla çalışmayı bildiğinizi varsayıyoruz. Örneğin elimizde arka.gif diye bir resim olsun. Bu resmi web sayfasının arka planına döşemek için yine <body> tag'ını kullanacağız. ARKA.GIF adındaki bir resmi web sayfasının arkasına döşemek için <body> tag'ını aşağıdaki gibi

    <body background="arka.gif"

    kullanmalısınız. Bu aşamada ARKA.GIF dosyasının, HTM dosyası ile aynı klasörde yer alması gereklidir. Örnek bir resim döşemesi aşağıdaki resimde gösterilmiştir. Bu aşamada bir web sayfasının arka planında bir resim döşediğinizde, arka plan rengi kullanmaya gerek kalmadığı gibi bir hisse kapılırsınız, yanılırsınız. Genelde Internet yavaş bir şey olduğu için, çoğu kullanıcı sörf yaparken resimleri kapatma yoluna gidiyorlar. Böyle olunca arka plana döşenmiş resimler görünmeyecek, arka plan rengi de default olarak gri olduğu için sizin hiç düşünmediğiniz bir web sayfası ortaya çıkabilecektir. Bu yüzden size tavsiyemiz, arka plan grafiği kullandığınızda arka planda kullandığınız resme uygun bir arka plan rengini de <body> tag'ının içinde belirtmenizdir. İki belirteç bir tag içerisinde kullanılabilir. Ve resmiler kapatıldığında web tarayıcısı otomatik olarak belirtilen arka plan rengini web sayfasına uygulayacaktır. Sarı içerikli bir arka plan resmi ile kullanılması gereken <body> tag'ı aşağıda gösterilmiştir.

    <body background="arka.gif" bgcolor="#ffff00">

    Adım 2. Web sayfasının metin içeriği. Web sayfalarında aynen kitap veya dergi sayfalarında olduğu gibi metinler ve resimler kullanılabilir. 2. Adımda web sayfalarında metinlerin kullanımına değineceğiz. Web sayfalarında metinler aynen Word veya benzeri bir kelime işlemci programda olduğu gibi bold, italik vs.. şeklinde formatlanabilir, font tipi, rengi ve boyutu ayarlanabilir. Web sayfasının içerisine yazdığınız metin web tarayıcısının genişliği boyunca yazılır, artan kısım otomatik olarak alt satıra atılır. Örneğin aşağıdaki gibi bir metnimiz olsun.

    Merhaba. Bu benim ilk web sayfası denemem. Yazdığım metni bold, italik, veya altçizgili olarak görüntülemek istiyorum.

    Bu metni web sayfasına girdiğinizde aşağıdaki gibi bir ekran görüntüsü ile karşılaşacaksınız. Şimdi bu metni formatlamaya başlayalım. Öncelikle merhaba kısmını büyük yapmak lazım. Bunun için de <hx> tag"ını kullanacağız. Bu tag'da x yerine birden 6'ya kadar numara verebilirsiniz. 1 en büyük boyut, 6 en küçük boyuttur. Denemeyle sabittir, 1 ile 4 arasında rakamlar kullanmak en iyisidir. Şimdi merhaba yazısını büyütmek için onu <h1> tag'ına alalım.

    <h1>Merhaba</h1>

    Burada, <h1> ile </h1> arasındaki metin, büyültülecektir. Aşağıdaki resimde merhaba tag'ı değişik <hx> boyutlarında kullanılmıştır. Böylece merhaba yazısını istediğimiz gibi büyüttük. <hx> tag'ını kullanırken öğrendiğimiz bir ikinci şey ise metin formatlamasının nasıl yapıldığı. Demek ki, bir tag'ın formatlaması iki tag arasına (<h1> ile açılış, </h1> ile kapanış) aldığımız metne uygulanıyor. Şimdi hızlı bir biçimde diğer metin tag'larını inceleyelelim.

    <b> </b> aradaki metni bold (kalın) yapar

    <i> </i> aradaki metni italik yapar

    <u> </u> aradaki metnin altını çizer

    Bu tür metin formatlama tag'ları birbirlerinin içinde kullanılabilirler. Örneğin bir metin parçasını hem bold hem de italik yapmak için <b><i> ..... </i></b>

    formatlamasını kullanmak gerekecektir. Özgün metnimize geri dönelim. Bu metinde adı geçen formatlamaları uyguladığımızda HTML sayfamızdaki metin aşağıdaki gibi olacaktır.

    <h1>Merhaba. </h1>Bu benim ilk web sayfası denemem. Yazdığım metni <b>bold</b>, <i>italik</i>, veya <u>altçizgili</u> olarak görüntülemek istiyorum.

    Böyle bir formatlama yapıldığında elde edilecek olan web sayfası görüntüsü aşağıdaki gibidir. Metin parçalarını web sayfasında görüntülerken paragraf başı ve satır sonunu da elle işaretlemek zorundasınız yoksa metin otomatik olarak alta kaydırılacaktır. Burada karşımıza iki adet tag çıkıyor. Bunlardan birincisi <br>, ikincisi de <p> tag'ı. Birincisi satır sonu, ikincisi ise paragraf başı anlamına geliyor. Söz konusu metinde ' Bu benim ilk web sayfası denemem' yazısından sonra bir satır sonu yani <enter> verelim. Ayrıca paragraf başını denemek için de ' bold, italik, veya altçizgili' metnini yeni bir paragraftan başlatalım. Bu durumda kullanacağımız formatlama aşağıdaki gibi olacaktır. <h1>Merhaba. </h1>Bu benim ilk web sayfası denemem. <br>Yazdığım metni <p><b>bold</b>, <i>italik</i>, veya <u>altçizgili</u> <p>olarak görüntülemek istiyorum.Dikkat ederseniz, <p> yani paragraf başı tag'ının kullanıldığı yerlerde <br> yani satır sonu kullanmıyoruz. Çünkü paragraf başı tag'ı zaten satır sonunu da belirlemektedir. Yukarıdaki örnekte kullanılan tag'lamanın ekranda göstereceği sonuç aşağıdadır. Son olarak HTML sayfalarında enter tuşunu kullanmanın web sayfasının görünümüne bir etkisi olmadığını söyleyelim. Web sayfalarının ekranda görünümünde satır sonları, satır araları ve paragraf başları tamamen tag'lar ile belirlenir. Bu yüzden metin dosyasında enter kullanmanın web sayfasına herhangi bir etkisi yoktur. Ancak web sayfasını düzenlerken her şeyin derli toplu gözükebilmesi için bu tür bir enter'lama yapabilirsiniz. Gelecek sayımızda metin formatlarken renk ve font kullanmayı, <pre> tag'ının ne işe yaradığını, metinlerin bir liste halinde nasıl alt alta sıralanacağını görecek ve web sayfalarında resim kullanımına giriş yapacağız.
    resim kullanmak :
    Resim Kullanmak
    Gelelim web dünyasının en önemli öğelerinden birine, resimlere. HTML dilinde her şey çok kolay olduğu gibi sayfalara resim yerleştirmek de çok kolaydır. Resimler sayfa içerisinde metne göre sağa, sola, aşağı ve yukarı doğru yerleştirilebilirler, ayrıca boyutları sadece belirli değerler değiştirilerek ayarlanabilir.
    Dokümanın herhangi bir yerine bir resim yerleştirmek için en sade haliyle <IMG SRC="RESIM.GIF"> tag'ını kullanabilirsiniz. Bu tag'ı kullandığınızda resim hiç bir yere yaslanmayacak, boyutu ayarlanmayacak, metin olarak bir alternatifi olmayacaktır.

    Yukarda da belirttiğimiz gibi resimleri kullanırken bir çok seçeneğiniz var, bu seçenekler sayfanın görünümünde kuşkusuz büyük rol oynayacaktır. Seçeneklerden birincisi Internet erişiminin yavaş olduğunu bildiğimiz ülkemizde sayfalarınızı görüntüleyecek olan kişilere biraz yardımcı olmak en azından resim yüklenene kadar kullanıcının meraklarını gidermek için kullanılabilir, bahsettiğimiz takı "ALT" tır. <IMG SRC="RESIM.GIF" ALT="deneme resmi"> satırını yazdığınızda web tarayıcınız RESIM.GIF adlı resmi yüklenmeden önce resmin yerine "deneme resmi" metnini girecektir, böylece kullanıcı resmi görmeden ne olduğunu bilecek ve anında STOP tuşuna basabilecektir. (!)

    Seçeneklerden biri de resmin ekranda görünecek boyutlarını ayarlamak için kullanılır bu takı HEIGHT ve WIDTH'tir. Bu takılar bir arada kullanılmalıdır, tek başına kullanıldığında web tarayıcısı takıyı göz ardı edecektir. <IMG SRC="RESIM.GIF" WIDTH=100 HEIGHT=50> satırını yazdığınızda RESIM.GIF isimli resmin boyutu ne olursa olsun 50 piksel yüksekliğe ve 100 piksel genişliğine getirilerek ekranda gösterilecektir. Resim gösterirken işinize yarayacak diğer bir seçenek ise BORDER'dır. Bu takı ileride değineceğimiz "Internet Kısayolları" (Hyper Link) ile ilgili olsa da şimdi birkaç püf noktası vermek gerekir. Başka bir URL'ye kısayol yaratıldığında kısayolun ismi bir alt çizgi ile belirlenir, bu işlem resimlerde resmin mavi bir çerçeve içerisine alınmasıyla belirtilir, Eğer bir resmi başka bir sayfaya kısayol olarak kullanacaksanız ve çerçevenin görünmesini istemiyorsanız BORDER=0 ifadesini kullanmalısınız.


    Resimleri kullanırken dikkat etmeniz gerekenler:
    * Daha önce de belirttiğimiz gibi Internet'te uzun süredir yer alan kullanıcılar, sitelerdeki büyük resimleri çok işlerine yaramadığı sürece görmek istemeyeceklerdir. Bu yüzden, her zaman resimlerin boyutunu küçük, miktarını az tutmalısınız.
    * Eğer büyük resimler kullanacaksanız, (büyük resim derken ekranı kaplayacak kadar büyük değil), bunları JPEG formatına çevirmenizi ve kalitesini düşürmenizi tavsiye ederiz. JPEG resimler her zaman GIF'lerden daha az yer kaplarlar, bu yüzden daha hızlı yüklenirler.

    * Resimlere her zaman ALT tag'ını kullanarak alternatif metinler verin, Internet'i kullananların her zaman resim görüntüleyebilecek, browser'ı olan makineler olduğunu varsaymayın. Eğer resimlere alternatif metinler verirseniz terminal ekranı kullanan kullanıcılarda bilgiye erişebilirler.

    * GIF'leri kullanırken "Interlaced" haline getirin, bu tip GIF'ler kademe kademe yüklenir ve yavaş yavaş netleşerek resmi daha hızlı yükleniyormuş gibi gösterir.
    yazı tipleri :
    HTML ve Yazıtipleri
    Dokümandaki yazıtipini değiştirmek için <FONT> tagı kullanılır, genel kullanımı şöyledir:
    <FONT SIZE="x" FACE="[isim] COLOR="#XXXXXX">

    * SIZE değişkeni metnin büyüklüğünü ayarlar, bu değişkene -1, +2 gibi değerler verilerek metnin puntosunun bir eksiltilmesini veya iki arttırılmasını sağlayabilir, direkt olarak bir rakam vererek puntoyu tayin edebilirsiniz. HTML sayfalarında SIZE değişkenine verebileceğiniz en büyük değer 5'tir. 5'ten sonra vereceğiniz her değer siz 5 değeri vermişsiniz gibi muamele görecektir. Yazıtipi çok büyük olmamalıdır, büyük yazıtipleri hem kullanıcıların sayfayı okumasını zorlaştırır hem de sayfanın güzelliğini bozar.

    * FACE takısını tüm web tarayıcıları desteklemese de bu takı kullanılarak sayfada resim kullanmadan oldukça güzel görüntüler elde edilebilir. Örneğin FACE="Arial Tur" takısı kullanıldığında yazı tipi Türkçe Arial olacaktır. FACE değerine Türkçe desteği olmayan "Comic Sans Ms" gibi yazıtipleri verilmemelidir, verilirse bazı Türkçe karakterler bozuk olarak görülecektir.

    * Son olarak COLOR takısı yazıtipinin rengini ayarlamakta kullanılmaktadır. Web tarayıcılarının desteklediği temel renklerden oluşan tablo geçen ay bu bölümde verilmiştir. Tablodan dilediğiniz bir rengi seçerek bu değişkenin karşısına yazdığınızda yazıtipi rengi değişecektir.

    * <FONT> ifadesi her zaman bir </FONT> ile sonlanmalıdır. Bu tag unutulursa web tarayıcınız sayfaları yanlış görüntüleyebilir. (Bazen de hiç görüntülemez)
    internet kısayolları :
    Internet Kısayolları
    LINK veya shortcut dediğimiz Internet kısayolları, Internet'te belki de en çok kullanılan özelliklerden biridir. Asli amacı Internet üzerinde herhangi bir sunucuya bağlı bir dosyayla bağlantı kurmak olan kısayollar ayrıca elektronik posta yollamak, Telnet bağlantısı kurmak gibi değişik amaçlar için de kullanılabilir.

    <a href=" [Adres] [:port]" >[Görüntü]</a>

    Internet kısayollarının kullanımı yukarıdaki gibidir. Adres kısmı bağlanılacak HTML sayfasını, görüntü kısmı ise kısayolun, sayfadaki görüntüsünü belirler. Örneğin yazacağınız

    <a href=" http://www..com.tr" > deneme</a>

    gibi bir satır ekranda deneme olarak görülecek ve sizi doğruca Türkiye'nin Web sitesine bağlayacaktır.
    Adres kısmı oldukça basit olmasına rağmen, bazı küçük püf noktaları da yok değil. Örneğin, adres kısmını kullanıcının size mail atması için kullanabilirsiniz. Bunu gerçekleştirmek için kişisel e-posta adresinizin önüne mailto: takısını getirmeniz yeterlidir. Örneğin hazırladığınız sayfada kullanıcıların size mail atabilmeleri için
    Bana <a href=" mailto:dlevitas@.com.tr" >mail</a> atabilirsiniz.
    gibi bir satır kullanabilirsiniz. Kısayollar ayrıca Telnet, FTP, Gopher servislerini de çağırabilirler. Bunları çağırmak için, sizin de tahmin edebileceğiniz gibi ftp://, gopher:// takılarını site isminin önüne getirmek yeterlidir. Genel kullanımda verdiğimiz :port takısının ne işe yaradığını merak edenler için hemen bir açıklama getirelim: Bu takı tüm web servisleri için 80 olup genelde kullanılmalarına gerek yoktur. Hızla gelişen Web teknolojisi çoook eskiden kullanılan :port takısının kullanımını gereksiz bir hale getirmiştir.
    Internet kısayolları, Web tarayıcınızın ayarıyla oynamadıkça ve HTML sayfasında aksini belirtmedikçe ekranda mavi altı çizili yazılar olarak görülürler. Siz ilgili linke tıkladığınızda ve işaret ettiği sayfayı izlediğinizde o sayfadaki link maviden mora dönüşür.
    Daha önce de belirttiğimiz gibi kısayol renkleri HTML sayfasındaki kodlarla değiştirilebilirler, üstelik siz bunu yaptığınızda kullanıcı web tarayıcısının ayarıyla oynayarak kısayolun rengini kendisine göre tayin edemez. İşte bunun nasıl yapılacağı:
    Sayfanızın başında <BODY...> ' tag'ıyla birlikte link=değer vlink=değer takılarını kullanarak ziyaret edilmiş ve edilmemiş kısayol renklerini belirleyebilirsiniz. Her zamanki gibi bunu yapmak için Hex renk kodlarını ve hazır renk adlarını kullanabilirsiniz. Örneğin sayfadaki kısayolların altı sarı çizgili görülmesini, aynı kısayolların ziyaret edilince kırmızıya dönüşmesini istiyorsunuz bunu yapmak için

    <BODY BGCOLOR=WHITE LINK=YELLOW VLINK=RED>

    satırını kullanabilirsiniz. Mutlaka siz de rastlamışsınızdır: Bazen resimler de bir Internet kısayolu olarak kullanılabiliyor. ' Bunu nasıl yapabilirim?' diyorsanız, hemen çok basit olduğunu belirtelim. Genel kullanım bölümünde verdiğimiz [görüntü] bölümüne önceki örneklerimizde hep yazı yazdık, bir de resim koymayı deneyelim:

    <a href=" http://www..com.tr" ><img src=" PCW.GIF" alt=" deneme" ></a>

    satırını yazdığınızda PCW.GIF isimli resim deneme'a bağlanmak için bir kısayol olarak kullanılacaktır. Burada dikkat etmeniz gereken bir husus var, o da resimlerin link olarak kullanıldığında mavi (ya da link için atadığınız renk neyse) bir çerçeve içine alındığıdır.
    Bunu önlemek için resmi yükleyen ' tag'ın sonuna bir border=0 ekini girebilirsiniz. Şöyle:

    <a href=" http://www..com.tr" ><img src=" PCW.GIF" border=0></a>
    Dikkat Etmeniz Gerekenler

    Bir kısayol oluşturduktan sonra mutlaka ' Acaba bir hata yapmış mıyım?' diyerek kısayolu kontrol edin. Bozuk kısayolların sitenizin ziyaret sayısını ve itibarını zedeleyeceğini unutmayın.
    Sonradan doldururum diye kısayolu önceden yerleştirmeyin. Sitenin başına ' inşa aşamasında' yazsanız bile yapmadığınız bölümlerin linklerini koymayın. Bunun yerine hazırladığınız bölümleri kısayol oluşturmaksınız Web sayfasına yerleştirin.
    Sitenize bulunduğunuz makineden FTP programıyla uzunca bir shareware yolluyorsunuz diyelim. Shareware'inizin kısayolunu önceden yollamayın, geçen zaman süresince sitenize bağlanıp o program ile ilgilenenler ' 404 Not Found' hatası ile karşılaşırlar.
    Internet adresi verirken başına http://, mail adresi verirken başına mailto: koymayı unutmayın. Bunu yapmazsanız verdiğiniz www..com.tr veya dlevitas@.com.tr gibi bir adres lokal bir dosya olarak görülür ve linkine tıklayınca doğal olarak hata verir.
    Internet kısayollarını ve resimlerin kısayollara atanması için nasıl kullanıldığını öğrendik...

    İşte bize en çok sorulan sorulardan biri:
    ' Web projem bir klasörde duruyor, lokal olarak çalışıyorum ve bir alt veya üst klasördeki dosyayı bulunduğum sayfadan çağırmak istiyorum. Nasıl yapacağım?'

    Üzerinde çalıştığınız HTML sayfası C:\PROJE\1 klasöründe olsun, sizin de C:\PROJE klasöründeki DENEME.HTM sayfasını çağırmak istediğinizi varsayalım. Bu dosyayı çağırmak için şöyle bir satır kullanmalısınız:

    <A HREF=" ../DENEME.HTM" >KISAYOL DENEME.HTM</A>

    ../ ifadesini istediğiniz kadar kullanabilirsiniz. İki alt klasördeki dosyayı çağırmak için ../../DENEME.HTM gibi bir ifade kullanabilirsiniz. Bir üst klasördeki (C:\PROJE\1\BASKA\SAYFA.HTM gibi) dosyayı çağırmak için ise şöyle bir yol izlemelisiniz:

    <A HREF=" BASKA/SAYFA.HTM" >KISAYOL</A>

    Eğer bir Web sunucusu üzerinde çalışıyorsanız ve sabit diskinizin tümü veya bir alt dizinini Web sayfalarınız için tanımlanmışsa kök dizine inmek ve buradan başka bir klasöre geçmek için / karakterini kullanabilirsiniz. Örneğin
    <a href=" /GIRIS.HTM" >GIRIS</a> satırı sizi web için ayrılan bölümün en dibine kadar indirecek ve GIRIS.HTM dosyasına kısayol oluşturacaktır. Bunun gibi resimler dizinindeki bir resmi çağırmak için
    <img src=" /resimler/.gif" > gibi bir ifade kullanmalısınız.
    Kısayollar için söyleyeceğim şimdilik bu kadar. Son olarak sayfalarınızın profesyonelliğini ve sayfanıza bağlananların ruh sağlığının korunması için "Dikkat Etmeniz Gerekenler" kutumuzu okumanızı ve sayfalarınızda uygulamanızı şiddetle tavsiye ederim.
    listeler :
    Liste Kullanmak
    HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır, bunun için öncelikle metnin ne biçimde listeleneceğini seçmelisiniz. Liste hazırlarken en çok rastlananları tipler <OL> ve <UL> dir. <UL> tag'ını listeye ait olan her satırın başına bir nokta koymak için kullanabilirsiniz. <OL> tag'ı ise her bir satırı isteğe göre numaralandırmanızı veya harflendirmenizi sağlar. Bu tag'lar ayrıca bir paragrafı diğer paragraflardan biraz ileriye itmek için de kullanılabilir. Liste tipini belirlemek için yukarıdaki iki seçeneği kullanıyoruz; peki liste seçeneklerini birbirinden ayırmak için nasıl bir yol izleyeceğiz. Listenin her bir öğesini belirtmek için ise <LI> tag'ı kullanılır. Bu karakterleri herhangi bir satırın önüne yerleştirdiğinizde web tarayıcınız bu satırı anında yeni bir liste öğesi olarak kabul edecektir.
    Birinci Satır
    İkinci Satır
    Üçüncü Satır
    HTML dokümanınızda yukarıdaki gibi bir görüntü elde etmek istiyorsanız aşağıdaki gibi kodlar kullanmalısınız:
    <UL>
    <LI>Birinci Satır
    <LI>İkinci Satır
    <LI>Üçüncü Satır
    </UL>

    Listeyi oluşturmak için <OL> kullanacaksanız bu tag'ın yanına TYPE=X takısını girerek liste biçimini belirleyebilirsiniz. Liste öğelerini sıralatmak için büyük harfleri kullanmak istiyorsanız X yerine A, küçük harflerle sıralamak için a, büyük Roma karakterleri ile sıralamak için I, küçük Roma karakterleri ile sıralamak için I, numaralarla sıralamak için ise L karakterini kullanabilirsiniz.

    Büyük harflerle ayrılan bir liste aşağıdaki gibi bir koda sahip olacaktır:

    <ol type=A>
    <li>Birinci Satır
    <li>İkinci Satır
    <li>Üçüncü Satır
    </ol>

    Herhangi bir liste içerisinde değişik veya aynı tipte bir liste daha açmak mümkündür. Bunun için <UL> veya <OL> tag'ını kapatmadan tekrar bir <OL> veya <UL> girmek yeterlidir. Açılan tüm liste tag'larının kapatılması unutulmamalıdır. Unutulduğu takdirde HTML sayfası düzgün görünmeyecektir.
    tablolar :
    Tablolar
    Tablolar, HTML sayfasında listeler ve şablonlar hazırlamak dışında, resimleri ve metinleri sayfa içerisinde istenilen bölgelere yerleştirmek ve bunun gibi bir çok alanda kullanılırlar. HTML 3.2 ile birlikte pek çok yeni özelliğe kavuşan ve daha görsel hale getirilen tablolar konusunu iyi öğrenen bir webmaster, hayalgücü ile tasarladığı "TÜM" sayfaları tablolar yardımı ile oluşturabilir.
    <TR>,<TD>,<TH> ve bunları kapatma taglarıyla birlikte kullanılan <TABLE...> tag'ının genel kullanımı şöyledir:

    <TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND="X">

    BORDER değişkenine verilecek 0 veya daha üstü bir değer tablonun kalınlığını belirler. CELLPADDING değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi, CELLSPACING ise hücreler arasındaki mesafeyi belirler.
    WIDTH ve HEIGHT değişkenleri bir yüzde değeri veya bir sayı olabilir. WIDTH=590 değeri verildiğinde 640*480 çözünürlükte ekranın tüm genişliğini kaplayacak bir tablo oluşturulur. WIDTH=%50 değerini verildiğinizde ise Web tarayıcınız o tablonun her zaman ekran genişliğinin yarısını kaplamasını sağlar.
    <TABLE> tag'ının içerisinde kullanılan BGCOLOR değişkeni tablonun fon rengini tayin eder. X değeri geçen aylarda değindiğimiz HEX kodlarından (#FFFF00) veya renk isimlerinden (white, olive...) biri olmalıdır. Tablonuz daha canlı ve profesyonel görünsün istiyorsanız, arka fonuna bir GIF veya JPG resmini de BACKGROUND ekini kullanarak döşetebilirsiniz.
    Gelelim tablonun oluşturulmasına. Genel prensip şudur: <TABLE> tag'ıyla tabloya başladıktan sonra her satırı oluşturmak için <TR>, her sütunu oluşturmak için ise <TD> tag'ını kullanmalısınız. Aman bu tagları kullanıyorsanız her satırın sonuna </TR> ve her sütunun sonuna </TD> tag'larının koymayı unutmayın!
    Bir diğer durum da, herhangi bir hücrenin yanındaki iki ya da daha çok hücreyi enine ya da boyuna doğru içine almasıdır ki bu işlemi yapmak için <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> ekleri kullanılır. Örneğin 2 satır ve 2 sütunlu 1.tablonun oluşturulması için aşağıdaki kodlara ihtiyaç vardır, bu kodlar aynı zamanda COLSPAN ve ROWSPAN eklerini de anlatmaktadır.

    <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=3>
    <!---Bu kodlarla, çerçeve kalınlığı 1, hücreler arası boşluğu 2, hücre ile yazı aralığı 3 olan yeni bir tablo oluşturuyoruz.--->
    <TR><TH COLSPAN=2> <!---iki kolonu içine alacak, yazılar kalın olacak ve ortalanacak (yani başlık olacak) --->

    Tablo Örneği:

    </TR></TD><TR><TD>
    deneme1
    </TD><TD> <!-- yeni bir kolona başlıyoruz... -->
    deneme2
    </TR></TD><TR><TD>
    deneme3
    </TD><TD> <!-- yeni bir kolona başlıyoruz... -->
    deneme4
    </TD></TR></TABLE> <!-- tüm tag'ları kapatıp tabloyu sonlandırıyoruz. -->

    Eğer renkli tablolar elde etmek isteseydik <TABLE .... ifadesinin yanına BGCOLOR="#FFFF80", <TD.. ifadesinin yanına ise BGCOLOR="#000080" eklerini girmeniz gerekecekti. Tablolar hakkında daha çok bilgi edinmek istiyorsanız deneme'daki "Web Programcısının El Kitabı" bölümüne bakabilirsiniz. Adresi: http://www..com.tr/rehber/webprog.htm. İlerki aylarda tablolar hakkında güzel püf noktaları ve daha çok bilgi bulacaksınız.
    sayfa içinde açıklama yapmak
    Sayfa İçinde Açıklama Yapmak

    Her programlama dilinde programcının hatırlatma veya açıklama yapabilmesi için gerekli bir komut vardır, HTML standartlarını koyanlar bunu da unutmamış ve HTML sayfalarına açıklama koyabilmek için bir yol bulmuşlar. Bir sayfaya açıklama koymak ya da belirli bir aralıkta kalan HTML kodlarını geçici olarak iptal etmek için ünlem işareti kullanılır. Aşağıdaki ilk satır bir açıklama satırıdır ve HTML dokümanı içerisinde görünmeyecektir, ikinci satır ise bir komutu iptal etmek için kullanılmıştır.

    <!-- Bu bir açıklama satırıdır -->
    <!-------- <b>Kalın yazı...</b> ------>
    freme kullanmak :
    Frame Kullanmak
    Frame'ler web tarayıcınızın penceresini birbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir. Yüklenen basit bir sayfayla yapılan pencereyi ayırma işlemi, her pencere için HTML standartlarına uygun bir sayfanın yüklenmesiyle tamamlanır. Frame'ler bulunan bir sayfa oluşturmak için herhangi bir HTML editörüne gerek yoktur. Tek ihtiyacınız olan basit bir metin editörü ve kafanızda tasarladığınız çerçeve stilini gerçekleştirmek için biraz düşünmek.
    Sayfanızda frame uygulamasına geçmeden önce hemen bu özelliğinin HTML 3.0 standartlarında bulunmadığını fakat en yeni web tarayıcıları tarafından desteklendiğini belirtelim. Netscape Navigator'ın 2.0 ve Microsoft Internet Explorer'ın 3.0 ve daha üstü sürümleri frameleri destekliyor.

    Frame'leri destekleyen bir sayfa oluşturuyorsanız mutlaka sayfanın, bu özelliği desteklemeyen web tarayıcıları için bir alternatifini oluşturmalısınız, aksi takdirde sitenize terminal ekranından veya eski bir web tarayıcıyla bağlanan kimseler içerikten faydalanamayacak ve sayfa ziyaret sayınıza katkıda bulunmayacaklardır (!) Frame'lere nasıl alternatif oluşturulduğunu yazımızın ilerki bölümlerinde anlatacağız. Başlamadan önce herkesin yaptığı gibi frame'ler konusunda 1-2 örnek verip sadece TAG'ları açıklamayacağımızı belirtelim, aynı zamanda kendi özgün çerçevelerinizi oluşturmanız için işin mantığına da değineceğiz.

    Frame'ler ne zaman kullanılmalıdır?

    Hiç gereği olmadığı halde web sayfanızda frame'lerden faydalanmak hem sayfanızın işlevselliğini yok edip kullanıcının kafasını karıştıracak hem de sayfanın yüklenmesini zorlayacaktır, web tarayıcınız bir web sayfasının yüklenmesi için sunucudan komutlar aldığından en az iki sayfadan oluşacak çerçeveli bir sayfayı yüklemek için ana sayfa da içinde olmak üzere üç sayfa için ayrı ayrı sunucudan bilgi alacaktır. Sayfa içerisinde, yüklenmesi uzun süre alacak, büyük bir resim, menü gibi değişmeyen öğeleri her seferinde tekrar yüklememek için bu bölümler ayrı bir pencere olarak tanımlanabilir.

    Sayfa içerisinde ilişkilendirmeler oluşturmak, sayfanın değişik alanlarına tıklandığında bağımsız bir yerde bir içerik oluşturmak frame'ler sayesinde çok kolaydır.


    Nasıl oluyor da oluyor?

    Frame'lere sahip bir sayfa oluşturmaya başlamadan önce web tarayıcılarında bu teknolojiyi destekleyen iki rakip firmanın ortak olarak kullandığı komutları açıklayalım.


    <FRAMESET>

    Bu tag, yatay ve dikey pencerelerin tanımına "başlamak" için kullanılır. Tag ile birlikte kullanılabilecek iki adet takı vardır ki bu takılar oluţturulacak pencerelerin cinsini belirler.

    COL takısı dikey nitelikte ROW takısı yatay nitelikte bir pencere oluşturmak için kullanılır.


    <FRAMESET COL="100,50,*> komutu bundan sonra üç sayfanın tanımı yapılacağını, bu sayfaların kolon nitelikli olacağını, bunlardan iki tanesinin sabit uzunluklu, üçüncüsünün uzunluğunun ise değişebilir olduğunu gösterir. Tırnak içinde sabit bir sayı ve yıldız kullanabileceğiniz gibi "%30,%70" bir yüzde değer de belirtebilirsiniz, bu durumda frame'in boyutu sayfanın boyutu göz önüne alınarak otomatik olarak ayarlanır. <FRAMESET> takısı </FRAMESET> ile bitirilmeden önce iç içe kullanılarak komplike pencere tanımları yapmanıza izin verir.


    <FRAME>

    Bu tag ise <frameset> ile başlayacağınızı belirttiğiniz sayfaları oluşturmakta kullanılır ve sayfanın genel yapısını belirler. <frame> takısının iki web tarayıcısının da desteklediği 6 adet takısı vardır.


    SRC="URL/DOSYA_ADI" Pencere içerisine yüklenecek dosyayı seçmek için kullanılır. Bu değer sunucu içinde herhangi bir dosya olduğu gibi değişik bir Internet adresi de içerebilir.


    NAME="FRAME_ADI" Daha sonra sayfayı çağırmak için referans olarak kullanılacak isim bu değere atanmalıdır.


    MARGINWIDTH="DEĞER" Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.

    MARGINHEIGHT="DEĞER " Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.

    SCROLL=AUTO/YES/NO Kaydırma çubuklarının durumunu belirler.

    NORESIZE Pencerenin fare yardımıyla genişletilip daraltılamamasını sağlar.


    <NOFRAME>

    Bu takı iki çerçeveyi oluşturacak sayfada kullanılır ve frame'leri desteklemeyen web tarayıcısında sayfanın görünümünü oluşturur. Web tasarımcısı <noframe> ve </noframe> takıları arasına <HTML>, <BODY> tag'larını barındıran tam bir HTML sayfası girebilir.


    Son olarak frame'leri tanımlayan sayfada bulunmayan fakat frame'in tanımladığı sayfaya koyabileceğiniz bir tag daha vardır. <BASE TARGET="pencere"> tagı o pencere içerisinden bir link'e tıklandığında kaynağın hangi pencerede açılacağını belirler.

    Nelere dikkat etmeli ?

    Frame'lerin kullanımını ve komutlarını anlatırken dikkat etmeniz gereken unsurların bir kısmındanbahsettik, ama yine de Internet üzerinde rastladığımız sayfalarda sık yapılan hataları belirtelim. Böylece siz de ilk deneyimlerinizde bu hatalardan kaçınabilirsiniz.


    Frame içindeki bir sayfada dışarıya bir referans bulunuyorsa <A HREF="… ile başlattığınız tag içinde mutlaka TARGET="_TOP" veya TARGET="_BLANK" takılarını kullanın. Bunu yapmazsanız frame'li sayfanız içinda başka bir frame'li sayfa açılması veya küçücük pencerenize sığmayacak bir sitenin yüklenmesi kaçınılmaz olur.


    Frame'inizi tasarlarken kaydırma çubuklarının otomatik olmasına özen gösterin. Sayfanın içerisinde yeterince içerik olmasa bile sayfa kenarlarında kaydırma çubuklarının bulunması kullanıcıya rahatsızlık verecektir.


    Frame'lerin içeriğini her zaman iyi kontrol edin. Çerçevelerden birini menü olarak kullanıyorsanız o çerçeve içerisinde yanlışlıkla başka bir sayfanın açılmasına mahal vermeyin.


    Pencerelerden bir tanesini "kaydırılamaz" olarak atıyorsanız ya bu frame'in genişliğini ve yüksekliğini sabit olarak atayın ya da sayfayı 640*480 çözünürlüğe uygun olarak tasarlayın. Bunu uygulamazsanız

    640*480 çözünürlükte frame'in içeriğinin bir kısmının görülmesi kullanıcı ne yaparsa yapsın mümkün olmayacaktır.

    Değişik çerçeve stilleri için kaynak kodlar

    <FRAMESET COLS="100,*">
    <FRAME SRC="1.htm" NAME="1">
    <FRAME SRC="2.htm" NAME="2">
    </FRAMESET>

    ---------------


    <FRAMESET ROWS="100,*">
    <FRAME SRC="1.htm" NAME="1">
    <FRAME SRC="2.htm" NAME="2">
    </FRAMESET>


    --------------------------


    <FRAMESET ROWS="100,*">
    <FRAME SRC="1.htm" NAME="1">
    <FRAMESET COLS="100,*">
    <FRAME SRC="2.htm" NAME="2">
    <FRAME SRC="3.htm" NAME="3">
    </FRAMESET>
    </FRAMESET>


    ---------------


    <FRAMESET COLS="100,*">
    <FRAME SRC="1.htm" NAME="1">
    <FRAMESET ROWS="100,*">
    <FRAME SRC="2.htm" NAME="2">
    <FRAME SRC="3.htm" NAME="3">
    </FRAMESET>
    </FRAMESET>


    -------------


    <FRAMESET COLS="100,*">
    <FRAME SRC="1.htm" NAME="1">
    <FRAMESET ROWS="100,*">
    <FRAME SRC="2.htm" NAME="2">
    <FRAME SRC="3.htm" NAME="3">
    <FRAME SRC="4.htm" NAME="3">
    </FRAMESET>
    </FRAMESET>
    kayan yazılar :
    Kayan Yazılar
    KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazılar insanların ilgisini daha çok çeker. Microsoft bunu düşünerek, benim vatandaşlarım da kayan yazılardan faydalanabilsin demiş ve <MARQUEE> tag'ını web tarayıcısının yorumlayıcısına eklemiş... Netscape ise Explorer 2.0'dan beri var olan bu tag'ı web tarayıcısına koymayı düşünmüyor. Yine de tag'ı kullandığınızda içerisinde var olan yazıların Netscape kullanıcıları tarafından 'normal yazı' olarak görüneceğini belirtelim.
    <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>

    BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir.

    BGCOLOR=renk: Kayan yazının arkasındaki rengi belirler. ' renk' değeri 16'lık sayı düzeninde bir değer olabileceği gibi ' red' ,' blue' gibi renk isimlerinden biri de olabilir.

    DIRECTION=yön: Yazının kayma yönünü belirler. DIRECTION eki, LEFT veya RIGHT değerlerinden birini almalıdır. LEFT değeri yazının soldan sağa doğru kaymasını, RIGHT ise bunun tersini sağlar.

    HEIGHT=n: Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri % işareti ile belirtilmelidir.

    HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir.

    LOOP=n: Yazıya verilen hareketin sınırlar içerisinde kaç kere tekrarlanacağını belirler. N değerine ' -1' veya ' INFINITE' verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.

    SCROLLAMOUNT, Kayan yazının bir defada kaç piksel hareket edeceğini, SCROLLDELAY ise yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirler. Yazının üst ve alt sınırdan ne kadar uzakta kalacağını VSPACE ile, yazının kayacağı toplam uzunluğu ise WIDTH ile ayarlayabilirsiniz. WIDTH değeri HEIGHT gibi bir yüzde alabilir.

    Örnek Kullanım:
    <MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>Bu kayan bir yazıdır... </MARQUEE>

    Örneğin Görünümü:
    Bu kayan bir yazıdır...
    multimedia öğeleri :
    Multimedia Öğeleri
    HTML etkileşimli ve çarpıcı dokümanlar oluşturmak için mükemmel bir ortamdır. Ses ve video görüntülerinin HTML sayfalarında kullanılabilmesi bu ortamı daha da çekici bir konuma getirir.
    Bu öğeleri kullanmak sadece 2-3 tane kilit komut bağlı. İşte bunları veriyoruz;
    Seçiminize göre geri planda WAV, .AU veya MIDI ses dosyalarından birini çalmak için Internet Explorer'da BGSOUND tag'ını kullanabilirsiniz.

    <BGSOUND SRC=' deneme.mid' LOOP=5>

    komutunu kullandığınızda ' deneme.mid' adlı MIDI dosyası sayfa yüklendiğinde 5 defa tekrarlanacak ve sonra duracaktır. Bir AVI veya MOV dosyasını oynatmak için ise yine sadece Explorer'da işe yarayacak DYNSRC komutunu kullanmalısınız.

    Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek için aşağıdaki gibi bir komut kullanmalısınız. Deneme.Gif dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır.

    <IMG DYNSRC=' deneme.avi' SRC=' deneme.gif' LOOP=INFINITE >

    Daha önce de belirttiğimiz gibi yukarıdaki komutlar sadece Explorer'da işe yarıyor. Peki çokluortam dosyaları
    Netscape'de nasıl gösterilir? Onunda yolu var fakat görsel açıdan Explorer'daki kadar başarılı olmuyor.

    EMBED komutuyla Netscape penceresine ' gömülen' dosyalar beraberinde çerçeve kaydırma çubuğunu da birlikte getiriyor. Yine de öğrenmek isteyenler için komutumuz şöyle:

    <EMBED SRC=' deneme.avi' >
    ilkel bir ' client pull '
    İlkel Bir 'Client Pull'
    POINTCAST'i hepiniz bilirsiniz. Kullanıcı bu servisin sağladığı arabirimde bir takım seçenekleri işaretler ve bu seçenekler doğrultusunda masaüstüne bilgiler gelir. <META> tag'ının yaptığı iş de bundan pek farklı değildir. Kullanıcıya ulaşan web sayfası bu tag sayesinde kendini belirli aralıklarla tekrar yükler veya kullanıcıyı başka bir web sayfasına ışınlar. ' Sayfayı isteme' işi kullanıcı tarafından sunucuya yollandığından bu komut ' client pull' işlemini başarıyor diyebiliriz. Bu tag ile birlikte aşağıdaki ekler kullanılmaktadır.
    HTTP-EQUIV=' REFRESH' : Saniyelerle belirlenen aralıklarla dokümanın kullanıcıya tekrar ulaşmasını sağlar.

    CONTENT=' n; URL=url' : Web tarayıcıya sayfanın ne aralıklarla tekrar yükleneceğini belirler. CONTENT eki içinde ayrıca URL ifadesi kullanılmışsa belirtilen zaman aralığından sonra hangi sayfanın yükleneceği de belirtilebilir.

    Aşağıda, mutlaka <HEAD> - </HEAD> aralığında kullanılması gereken <META> tag'ının iki örneğini veriyoruz. 1. örnek, bulunulan sayfayı her iki saniyede bir tekrar yükleyecek, 2. örnek ise açıldıktan 5 saniye sonra www.. com.tr adresli deneme'ın web sitesine bağlanacaktır.

    ÖRNEK - 1
    <HTML>
    <HEAD>
    <META HTTP-EQUIV=' REFRESH' CONTENT=2>
    <TITLE>Tekrar Yükleme</TITLE>
    </HEAD>
    <P>Bu sayfa 2 saniyede bir tekrar yüklenecektir.
    </HTML>



    --------------------------------------------------------------------------------

    ÖRNEK - 2
    <HTML>
    <HEAD>
    <META HTTP-EQUIV=' REFRESH' CONTENT=' 5; URL=http://www..com.tr' >
    <TITLE>İkinci Dokümanı Yükle...</TITLE>
    </HEAD>
    <BODY>
    <P>Bu sayfa 5 saniye sonra deneme'ın web sitesine bağlanacaktır.
    </BODY>
    </HTML>


    --------------------------------------------------------------------------------
    rastgele işlemler
    Rastgele İşlemler
    WEB Okulu sayfalarımızda zaman zaman faydalı Java Script kodları vereceğiz. İşte bunlardan bir tanesi; kodlarımız bulunulan saniyeyi okuyarak her saniyede değişik bir Murphy kuralını ekrana getiriyor. ' AR' değişkeniyle kaç adet kural olduğu tanımlandıktan sonra, kural Getmessge fonksiyonuna atanıyor ve fonksiyon <BODY...> tag'ının içerisinden çağrılıyor. Kendi vecizelerinizi bu script'e eklemek için öncelikle ' Array(3)' değerini daha sonra ' ar[sec % 4])' değerini yükselmeli ve vecizeyi yeni bir ' ar[x] =' satırına eklemelisiniz.
    <HTML>
    <HEAD>
    <TITLE>Rastgele Vecizeler</TITLE>
    <SCRIPT LANGUAGE=' JavaScript' >
    <!--
    function getMessage() {
    var ar = new Array(3)
    ar[0] = ' Hiç bir iş göründüğü kadar kolay değildir.'
    ar[1] = ' Her iş tahmin ettiğinizden çok vakit alır.'
    ar[2] = ' Yanlış gitme olasılığı olan her iş yanlış gider.'
    ar[3] = ' Bir takım işlerin yanlış gitme olasılığı varsa size en çok zarar verecek olanı yanlış gider.'
    var now = new Date()
    var sec = now.getSeconds()
    alert(' Murphy Kanunu:\r' + ar[sec % 4])
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY onLoad=' getMessage()' >
    </BODY>
    </HTML>
    transparan gifler
    Transparan GIF'ler
    Internet üzerinde gezinirken, resimlerin arka plan ve arka renkler ile uyum içinde olduğunu, resmin kare olmasına rağmen arka planın resmin boşluklarından görünebildiğine şahit olursunuz. Eğer web sayfanızda bir resim kullanıyor ve resmin boş taraflarından arkaplanın görünmemesinden ve resmin sayfa üzerinde yama gibi görünmesinden yakınıyorsanız bu bölümü dikkatle okuyun.
    Bu bölümde resmi transparan hale getirirken en çok kullanılan shareware grafik editörlerinden biri olan Paint Shop Pro'nun 3.12 sürümünü kullanacağız. PSP 4.0 sahipleri de yaptıklarımızı aynen kendi programlarında uygulayabilirler. Öncelikle Paint Shop'u açın ve transparan yapmak istediğiniz GIF dosyasını yükleyin, unutmayın transparan dosyalar sadece GIF formatında ve 256 renkte olabilirler.
    "Select" araç kutusundan aşağıdaki resimde de seçili olan "Color Picker"ı seçin ve resim üzerinde transparan yapmak istediğiniz, yani yaprak ve dünyanın dışında kalan alanın üzerine götürün. Fareyi bu bölgeden ayırmadan durum çubuğunun sağ bölmesinde I: değerinin yanındaki değeri aklınızın bir kenarına kaydedin.

    "File" menüsünden "Save As..." komutunu çalıştırın ve format olarak GIF89a - Interlaced'i seçin. Diyalog kutusunun sağ tarafında bulunan Options butonuna bastığınızda GIF Transparency Options Diyalog kutusu karşınıza gelecektir. Bu kutucukta "Set Transparency Value to:" seçeneğini işaretleyip karşısındaki metin kutusuna "I:"nın karşısında okuduğunuz değeri (yani yalnız bu resim için 215'i) yazarsanız GIF dosyasının
    renk seçici ile seçtiğiniz rengi transparan olacak böylece arkaplanlar bu bölgeden görülebilecektir. Resimler her zaman başarılı olarak transparan yapılamazlar, bunun sebebi bazen resmin istemediğiniz alanlarında transparan yaptığınız renge ait parçacıkların kalmasıdır. Bunu önlemek için resmi yüksek renge getirdikten sonra resim ile alakası olmayan bir renk seçip transparan yapmak istediğiniz alanı bu renk ile boyamalı ve resmi tekrar 256 renge getirerek bu rengin indeksini okuyup transparan hale getirmelisiniz. Bir transparan GIF'in hikayesi kısaca böyle, "Benim işim gücüm var, bu kadar işle uğraşamam" diyorsanız, Internet üzerinde yüzlerce GIF dönüştürme seti bulabilirsiniz, hızlı olmalarına rağmen insan elinin yerini tutmaz ama olsun.
    resimlerinizin haritasını çıkartın
    Resimlerinizin Haritasını Çıkartın
    IMAGE map'ler kullanıcının belirli bir resmin değişik alanlarına tıkladığında farklı adreslere gidebilmesine olanak tanır. İki şekilde hazırlanabilecek Image Map'ler isteğe göre HTML sayfasına veya sunucu üzerindeki başka bir dosyaya yerleştirilebilir. Biz bu konumuzda HTML sayfalarına yerleştirilen Image Map'leri inceleyecek Paint Shop Pro yardımıyla bir resmin haritasının nasıl çıkarılacağını göstereceğiz.
    <MAP NAME="map1"><!-- Örnek resmin HTML kodları -->
    <AREA SHAPE="RECT" COORDS=' 7, 7, 119, 74' HREF="http://www..com.tr">
    <AREA SHAPE="CIRCLE" COORDS=' 178, 41, 35' href="http://www.idg.com.tr">
    </MAP>

    Öncelikle HTML sayfasında yukarıdaki gibi kodlar kullanır ve istediğimiz resimde hangi noktalara tıklandığında hangi adreslere bağlanılacağını belirtiriz. Daha sonra <IMG SRC=' map1.gif' USEMAP=' #map1' > gibi bir ifade kullanılarak haritasının çıkarılmasını istediğimiz resmi sayfaya yerleştirir ve bu resim için ' map1' isimli haritanın kullanılacağını belirtiriz.

    MAP TAG'I <MAP NAME='deneme' > AREA takılarıyla tanımlanan haritaya başlangıç yapar ve bir isim verir.

    AREA TAG'I
    <AREA COORDS=koordinatlar SHAPE=tip HREF=url TARGET=pencere>

    COORDS
    Tanımlanan şekle göre değişik koordinatlar girebilmenizi sağlar

    SHAPE=tip
    Tip RECTANGLE, CIRCLE, POLYGON seçeneklerinden biri olabilir. RECTANGLE Bir kare tanımlar ve ' x1, y1, x2, y2' değerleri kullanılır. CIRCLE Bir çember tanımlar ve ' OrtaX, OrtaY, Yarıçap' değerleri kullanılır. POLYGON Bir poligon tanımlar. Birçok noktadan oluşabilir.

    HREF
    Şekle tıklandığında hangi adrese gidileceğini belirler.

    TARGET
    Gidilecek adresin hangi pencerede açılacağını belirler

    Peki tanımladığımız şekillerin koordinatlarını nasıl bulacağız? Bu da çok basit, en büyük yardımcımız olan Paint Shop Pro'yu kullanarak istediğimiz bir noktadaki koordinatları bulabiliriz. Örneğin bir karenin sınırlarını öğrenmek istiyorsunuz, hemen resmi açın ve tanımlamak istediğiniz karenin üst sol noktasına gidin. X1 ve Y1 noktalarını durum çubuğundan öğrenip bir kenara not ettikten sonra sol alt sınıra gidin ve X2, Y2 noktalarını öğrenin. İşte bu kadar basit.



    floating frame kullanımı
    FLOATING FRAME KULLANIMI
    HTML sayfalarında sık kullanılmayan bir unsur olsa da HTML 3.2 standartlarına giren Floating Frame özelliğini anlatmakta fayda görüyoruz. Sayfa içerisinde başka bir HTML sayfasını göstermek istiyor ve bu sayfanın dilediğiniz sınırlar dışına taşmasına engel olmak istiyorsunuz. O zaman Floating Frame'leri kullanabilirsiniz. Aşağıda gördüğünüz örnek satırı HTML sayfanıza girdiğinizde 200x200 piksel ebatlarında bir pencere açılacak ve DENEME.HTM sayfası bu pencerenin içerisine yüklenecek.
    <IFRAME SRC="deneme.htm" width=200 height=200></IFRAME>

    SRC= ifadesinin karşısına HTML dosyasının adını vererek kullanabileceğiniz gibi http://www.altavista.digital.com benzeri bir adres de kullanarak bir ' Web sitesinin' pencere sınırlarınız içerisinde açılmasını sağlayabilirsiniz
    sayfa ne zaman değiştirilmiş
    SAYFA NE ZAMAN DEĞİŞTİRİLMİŞ?
    BİR siteyi cazip kılan özelliklerden biride güncellemedir. Sayfanıza bağlanan kullanıcıların ilgili sayfanın en son ne zaman güncellendiğini bilmesini istiyorsanız aşağıdaki Java Script'i, kullanabilirsiniz. Bu script'i sayfanıza bir kez ekleyip varlığını unutabilirsiniz, çünkü aşağıdaki akıllı kodlar HTML sayfasının tarihine bakarak bunu sayfa açıldığında otomatik olarak görüntülüyorlar. Böylece küçük değişiklikler yapsanız bile sayfadaki tarihi her defasında tekrar girmek zorunda kalmıyorsunuz.
    <SCRIPT LANGUAGE=JavaScript>
    <!--
    var mod=document.lastModified.split("");
    document.writeln("Bu sayfanın son güncellenme tarihi:" + mod[0]);
    -->
    </SCRIPT>
    sayfanızda bambaşka bir sayfa
    SAYFANIZDA BAŞKA BİR SAYFA
    BAZI Web sitelerinde görürsünüz, güncel olaylar bir pencere içerisinde yukarıdan aşağıya veya tersi yönde sayfanın bir köşesinde kaydırılır ve bu işlem genellikle bir Java programcığıyla yapılır. İşte size bunu hiç zahmet harcamadan yapmanın yolunu gösteriyoruz. Aşağıdaki kodları sayfa içerisinde kullandığınızda deneme.htm dosyası bir pencere içerisinde açılacak ve devamlı olarak yukarı doğru kaydırılacak.
    <OBJECT ALIGN=CENTER CLASSID="clsid:1a4da620-6217-11cf-be62-0080c72edd2d"
    WIDTH=200 HEIGHT=200 BORDER=1 HSPACE=5 ID=marquee>
    <PARAM NAME="ScrollStyleX" VALUE="Circular">
    <PARAM NAME="ScrollStyleY" VALUE="Circular">
    <PARAM NAME="szURL" VALUE="deneme.htm">
    <PARAM NAME="ScrollDelay" VALUE=60>
    <PARAM NAME="LoopsX" VALUE=-1>
    <PARAM NAME="LoopsY" VALUE=-1>
    <PARAM NAME="ScrollPixelsX" VALUE=0>
    <PARAM NAME="ScrollPixelsY" VALUE=-3>
    <PARAM NAME="DrawImmediately" VALUE=0>
    <PARAM NAME="Whitespace" VALUE=0>
    <PARAM NAME="PageFlippingOn" VALUE=0>
    <PARAM NAME="Zoom" VALUE=100>
    <PARAM NAME="WidthOfPage" VALUE=400>
    </OBJECT>
    style sheed kullanımıSTYLE SHEET KULLANIMI
    WEB tarayıcı geliştiren firmalar bir yandan yeni teknolojileri tarayıcılarına adapte ederken diğer bir yandan HTML dilinin getirdiği sınırlamaları ortadan kaldırmak için kendilerine göre yollar buluyorlar. İşte ilk olarak Microsoft'un ortaya attığı, günümüzde pek yaygın olarak kullanılmasa da Active HTML'ye dahil edilen Style Sheet'ler. Ne işe mi yarıyor? Yaptığı iş çok basit: Sayfa içerisinde kullanılan paragraf, başlık, kısayol gibi nesneleri önceden tanımlayarak sizi, bunları her defasında tekrar tanımlama zahmetinden kurtarıyor. Şu anda W3C'nin de (World Wide Web Consortium) kabul ettiği bu HTML 3.2 standardını bir nevi ' şablon' olarak niteleyebiliriz. Öyle ki bir defa şablonunuzu tanımladığınızda bu şablonu diğer sayfalarınızdan da kolayca çağırabiliyorsunuz. Örnek için aşağıdaki kodları inceleyip nasıl bir görüntü oluşturduğunu resimden görebilirsiniz.
    <HTML>
    <title>Style Sheet Kullanımı</title>
    <STYLE>
    BODY {background: white;}
    H1 {font: 24pt Arial bold}
    P {background: yellow;}
    A {text-decoration: none; color: blue}
    </STYLE>
    <BODY>
    <H1>Bu bir başlık! 24 punto, Arial ve Kalın.</H1>
    <p>Üzeri sarı işaretleyici ile çizilmiş alelade bir yazı.</p>
    <a href="deneme.htm">Link'lerin altının çizilmemesini bu yolla sağlayabilirsiniz.</a>
    </BODY>
    </HTML>

    Gelecek aylarda Style Sheet konusunu ayrıntılarıyla inceleyeceğiz. Yine de merak edenler için bu konuyla ilgili geniş bilgi edinebilecekleri adresi verelim: http://www.w3.org
    arama motorlarına yardımcı olun :ARAMA MOTORLARINA YARDIMCI OLUN
    GECENİZİ gündüzünüze kattınız ve bir site hazırladınız. Şimdi insanların sitenizin varlığından haberdar olmasını istiyorsunuz. Ne yapacaksınız? Tabii ki sitenizi bilinen arama motorlarına kayıt edeceksiniz. İşte bu noktada bir püf noktasına ihtiyacınız var. Arama motorlarının kullandığı ' ajan' programlar sitenize geldiklerinde ilk baktıkları şey bir takım tanımlardır. Aşağıda bu tanımları oluşturmak için gereken satırları göreceksiniz. Bu satırları <HEAD>...</HEAD> ifadeleri arasına girerseniz hedef kullanıcıya ulaşmanız daha kolay olacaktır.
    <META name="description" content="Sitenizin amacı, kısa açıklaması, sloganı">
    <META name="keywords" content="sitenizdeki bölümler, anahtar kelimeler" >
    <META name="copyright" content="Telif sınırlamaları ve tanımları" >
    animasyonlu " gif " oluşturalım :
    Animasyonlu "gif" oluşturalım
    Web sayfalarının vazgeçilmez unsurlarından biri tabii ki animasyonlu GIF dosyaları. Bir seri GIF dosyasının üst üste getirilerek oynatılmasından oluşan animasyonlu GIF'ler web sayfasında aktif içeriği sağlamak için kullanılabilecek ilgi çekici ve basit bir teknik. Peki Animasyonlu GIF yapmak için neye ihtiyacınız var? Kullanabileceğiniz programlar neler?
    Animasyonlu GIF yapmak için önünüzde bir çok seçenek var. Animagic, GIF Constructor, Animator Pro, Microsoft GIF Animator gibi programlar bunlardan sadece birkaç tanesi. Şimdi bu programlardan http://www.microsoft.com/imagecompos...or/gifanin.htm adresinden indirebileceğiniz Microsoft GIF animatorı tanıtacak ücretsiz ve kullanımı basit olan bu program ile bir animasyonu nasıl oluşturacağınızı anlatacağız…

    Programı çalıştırdığınızda ve bir GIF dosyasını açtığınızda karşınıza her bir kareyi görebileceğiniz bir alan ile birlikte animasyonun akışını ve karakterini belirleyebileceğiniz üç adet sekme gelecektir. Programda bir menü bulunmuyor fakat üstteki tuş takımını kullanarak dosya açma, dosya kaydetme, kesme, kopyalama gibi işlemleri gerçekleştirebiliyorsunuz.

    Options ve Animation sekmelerinin, resmin tümünü, Image sekmesinin sadece seçili olan kareyi etkilediğini belirttikten sonra dilerseniz her bir sekmenin ve alt seçeneklerinin ne işe yaradığını açıklayalım:

    Options Sekmesi
    Thumbnails Reflect Image Position: Karelerin öngösterim penceresinde nasıl görüneceğini belirler. Bu seçeneği işaretlediğinizde kareler animasyonda görüleceği şekilde öngösterim penceresinde tekrar boyutlandırılır.

    Main Dialog Window Always On Top: GIF Animator'ın tüm pencerelerin üzerinde görülmesini sağlar.
    Import Color Palette: GIF paletinin cinsini belirler. Optimal palette seçildiğinde tüm karelerin paletleri birleştirilir ve 256 renge indirgenir. Browser Palette ise tüm karelerin paletlerini web tarayıcısının 216 renklik paletine çevirir.

    Import Dither Method:
    Solid: Karenin renklerine en yakın renkleri seçer.
    Pattern: Çok fazla renge sahip animasyonlar için en optimal renkleri seçer
    Random: Pattern'den daha iyi bir seçenektir fakat daha yavaştır.
    Error Diffusion: Karelerde hata düzeltmesi yapar, parlama gibi yanlışlıkları törpüler.

    Animation Sekmesi
    Animation Width, Animation Height, Image Count: Animasyonlu GIF dosyasının uzunluk ve genişliğini, kaç adet kareden oluştuğunu gösterir.
    Looping: Animasyonun kaç defa tekrarlanacağını belirler. Repeat Forever seçeneği işaretlendiğinde metin kutusundaki değer gözardı edilir ve animasyon sonsuza kadar devam eder.
    Trailing Comment: Animasyon hakkında genel bir açıklama yapmanıza olanak tanır.

    Image sekmesi
    Bu bölümde karenin yükseklik ve genişliğini veren Image Width ve Image Height seçenekleri her zaman sabit kalır.
    Left: GIF parçasının ana GIF dosyasının solundan ne kadar uzağa yerleştirileceğini,
    Top: parçacığın üstten ne kadar uzağa yerleştirileceğini gösterir. Bu iki değer küçük parçacığın ana parçacık üzerindeki koordinatını vermesi açısından önemlidir.

    Bu sekmedeki "Duration" seçeneği karenin kaç milisaniye (Saniyenin yüzde biri) ekrana duracağını belirler.
    Undraw Method seçeneği küçük parçacığın işi bittikten sonra ne olacağını belirler.
    "Leave" alt seçeneği parçacığın işi bittikten sonra ekranda kalmasını, "Restore Previus" parçacığın kullanılmadan önceki halinin geri getirilmesini, "Restore Background" ise parçacığın kullanıldığı alanın boşaltılmasını sağlar. Image sekmesindeki "Transparancy" seçeneği karenin hangi renginin transparan renk olacağını belirler. Kullanılması pek kolay olmayan bu seçenek iyi göz kararı istiyor çünkü transparan rengi önizleme karesinden değil de renk paleti içerisinden seçmenizi istiyor. Son olarak her kare için ayrı bir açıklama getirebileceğinizi belirtelim. Açıklamaları yazmak için "Comment" kutusunu kullanabilirsiniz.

    Animasyonu oluşturalım…
    GIF Animator ile animasyon oluşturmak çok kolaydır. Animasyonunuzun parçalarını bir grafik editörüyle oluşturduktan sonra ister teker teker kaydederek GIF Animator'a sürükler isterseniz grafik editörünüzden panoya yapıştırarak Animator penceresinde Shift+Insert tuşlarına basarsınız.

    GIF Animator en iyi sonucu önceden kaydedilmiş resimlerin sürüklenip bırakılmasıyla elde ediyor.
    İstediğiniz kareleri Animator penceresinde oluşturup ok tuşlarıyla sıralarını belirledikten sonra sıra animasyonun kaç kere tekrarlanacağına geliyor. Bu işlemi de bitirdiğinizde artık Image sekmesine geçerek her bir karenin pozisyonunu ayarlayabilir ve işi bittikten sonra ne olacağını belirleyebilirsiniz.

    GIF Animatoru, daha doğrusu tüm animasyon programlarını kullanırken dikkat etmeniz gereken bir iki nokta var. Bunlardan birincisi resmin sadece değişen parçalarını almanız ve bunu animator penceresine yapıştırmanız, diğeri ise animasyonlarınızda fazla renk kullanmamanız. Eğer animasyonlarınızda tekrarlanmayan parçaları tekrar tekrar kullanırsanız dosyanın büyümesi, dolayisiyle yüklenmesinin zorlaşmasını sağlamış olursunuz.
    alt çizgisiz ve aktif kısayollar :Alt çizgisiz ve aktif kısayollar
    Bu günlerde alt çizgisiz ve klasik mavi renge sahip olmayan Internet kısayolları kullanmak çok moda oldu. Herkes gerekli olsun olmasın bu tip kısayolları kullanıyor. Eğer siz de bu tip link'lerin sayfanızın genel görünümünü güzelleştireceğine inanıyor ve bunları kullanmak istiyorsanız size bu işi nasıl becerebileceğinizi anlatalım.
    Alt çizgisiz bir kısayol oluşturmak için <A HREF… takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek.

    <p>Alt çizgisiz kısayol:<br>
    <A HREF="http://www..com.tr" STYLE="text-decoration: none">PC deneme</a><p>

    Dilerseniz bir adım daha ileri giderek altı çizili olmasına rağmen üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli.

    <p>Aktif ve normal kısayol:<br>
    <A HREF="http://www..com.tr" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'"> deneme</a>

    Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız.

    <p>Aktif ve alt çizgisiz kısayol:<br>
    <A HREF="http://www..com.tr" STYLE="text-decoration: none" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
    deneme</a>
    yönlendirme :
    Yönlendirme
    Web tarayıcısının tipine göre kullanıcıyı ilgili sayfaya yönlendirmeyi gösteriyoruz. Özellikle Internet Explorer'da çekici görüldüğünü düşündüğünüz bir sayfa varsa fakat sayfanın normal halinin diğer kullanıcılar tarafından izlenebilmesini istiyorsanız bu yola başvurabilirsiniz. Aşağıdaki kodlar Internet Explorer 4.0 web tarayıcısını gördüğünde hemen ilgili sayfaya gidecek aksi durumlarda ise sayfanın içeriğini gösterecektir.
    <HTML>
    <HEAD><TITLE>DENEME</TITLE></HEAD>
    <BODY BGCOLOR="#FFFFFF">

    <!-- Web tarayıcısının tipini ve sürümünü öğreniyoruz -->
    <script language="JavaScript">
    browser = navigator.appName;
    version = parseInt(navigator.appVersion);
    if (browser == "Microsoft Internet Explorer" && version >= 4) type = "e4";
    else type = "e1";
    </script>

    <!-- Explorer 4.0 ise aynı dizindeki IE.HTM dosyasına yönlendiriyoruz -->
    <script language="JavaScript">
    if (type == "e4") { location = "IE.HTM " }
    </script>

    Netscape ve Internet Explorer'ın önceki sürümleri için hazırladığınız sayfa.
    </BODY>
    </HTML>
    her girişte farklı bir resim :Her girişte farklı bir resim!
    "Aman sitemde her türlü script'i kullanayım, geri kalmayayım" diyorsanız işte size harika bir script veriyoruz. Kodlarımızı kullanarak web sayfanız yüklenirken sunucunuzun RESIM klasöründe bulunan RESIM1… RESIM2 gibi GIF dosyalarından herhangi bir tanesinin rastgele olarak seçilmesini ve gösterilmesini sağlayabilirsiniz. Bu programcık ayrıca resmin üzerine tıklandığında resimle aynı adı taşıyan fakat HTM (RESIM1.HTM) uzantılı dosyanın da ayrı bir pencerede açılmasını sağlıyor.
    <script language="JavaScript">
    <!--
    var now=new Date(); var status=(now.getSeconds())%3;
    document.write('<a target="_blank" href="/resim/resim'+status+'.htm"><img src="/resim/resim'+status+'.gif"></a>');
    //-->
    </script>

    Not: Kodları kullanırken kullanıcıya her defasında bir tanesini görmesi için verdiğin tüm resimleri görebileceğini söylememize gerek yoktur herhalde. Bunu yapabilmesi için sadece HTML kodlarınıza bir gözatması yeterli olacak.
    "çerezler" ile ziyaret sayısını öğrenmek :
    "ÇEREZLER" İLE ZİYARET SAYISINI ÖĞRENMEK
    Genellikle büyük yabancı firmaların web sitelerinden yolanan ve bilgisayarımıza yerleşen cookie'ler (Microsoft Türkçesi ile "çerezler") bilgisayarınızın veya sizin hakkınızdaki basit bilgileri sabit diskinizde belirli bir klasörde tutmak için kullanılır. Web sitesini tekrar ziyaret ettiğinizde bu bilgiler sunucu tarafından okunur ve sunucu sizin hakkınızdaki bilgileri bu yolla edinir. Windows'unuzu tekrar kurduğunuzda bazı web sitelerinde oluşturduğunuz kişisel sayfaların karşınıza gelmemesinin sebebi budur. Web sunucu, cookies klasöründeki bilgilerinizi bulamadığı için sizin kim olduğunuzu anlayamaz…
    Sayfanızı ziyaret eden kullanıcının sabit diskinde bilgi tutmak çok kolaydır. Aşağıdaki Javascript, kullanıcının ziyaret sayısını yine kullanıcının sabit diskinde tutar ve kullanıcının her yeni ziyaretinde sayıyı bir arttırır. Çerezler hakkında daha çok bilgiyi ilerki sayılarımızda bulacaksınız, yine de merakınızı gidermek istiyorsanız http://www.netscape.com/newsref/std/cookie_spec.html adresini ziyaret edebilirsiniz.

    <html><head>
    <script>
    cookie_name = "Counter_Cookie";
    function doCookie() {
    if(document.cookie) {
    index = document.cookie.indexOf(cookie_name);
    } else {index = -1;}
    if (index == -1) {
    document.cookie=cookie_name+"=1; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";
    } else {
    countbegin = (document.cookie.indexOf("=", index) + 1);
    countend = document.cookie.indexOf(";", index);
    if (countend == -1) {countend = document.cookie.length;}
    count = eval(document.cookie.substring(countbegin, countend)) + 1;
    document.cookie=cookie_name+"="+count+"; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";}}
    function gettimes() {if(document.cookie) {
    index = document.cookie.indexOf(cookie_name);
    if (index != -1) {
    countbegin = (document.cookie.indexOf("=", index) + 1);
    countend = document.cookie.indexOf(";", index);
    if (countend == -1) {
    countend = document.cookie.length;}
    count = document.cookie.substring(countbegin, countend);
    if (count == 1) {
    return (count+" kere");
    } else {return (count+" kere");}}}
    return ("0 kere");}
    </script>
    </head>

    <body onLoad="doCookie()">
    <center><script>
    document.write("<b>Merhaba! Bu sayfaya daha önce "+gettimes()+" uğradınız.</b>");
    </script></center>
    karşılama ve uğurlama :
    KARŞILAMA VE UĞURLAMA
    İşte sayfanıza gelen kullanıcıları karşılayan ve sayfayı terkederken uğurlayan bir JavaScript. <BODY… tag'ı ile kullanılan bu script kullanıcı Web tarayıcısının penceresini kapatsa bile sayfanın terkedildiğini anlıyor ve bir mesaj kutusu çıkararak uğurlama mesajını gösteriyor.
    <HTML>
    <BODY BGCOLOR="#FFFFFF" onLoad="alert('Sayfama Hoşgeldiniz!');"
    onUnload="alert('Tekrar Bekleriz...');">
    </BODY>
    </HTML>
    tüm iş arkaplanlarda :
    TÜM İŞ ARKAPLANDA
    deneme'ın sayfalarını hazırlarken sol tarafı şeritli sayfaları oldukça sık kullanıyoruz. Hem göze güzel gelen hem de konu başlıklarının kolayca yerleştirebileceğiniz bu sayfa tipini uygulamak çok kolaydır. Bu tip bir sayfayı oluşturmak için tek gerekli olan şey uygun bir arkaplan ve sayfayı bu arkaplana göre ayıracak iki hücreli bir tablodur.
    Şeritli bir arkaplan oluşturmak için sadece 1 piksel yüksekliğinde ve 1024 piksel uzunluğunda bir grafik oluşturun. Grafiğin ana sayfayı oluşturacak kısmını dilediğiniz renkte boyadıktan sonra şerit için uygun bir renk seçin ve sol taraftan dilediğiniz kadar pikseli bu renkle boyayın. Şeridin 100 piksel olduğunu varsayan kodlar aşağıdakine benzer olmalıdır:

    <HTML>
    <BODY BACKGROUND="ARKA.GIF">
    <TABLE BORDER=0 WIDTH=590><TR><TD WIDTH=100>
    Şerit üstündeki yazılar
    </TD><TD WIDTH=490>
    Ana sayfadaki yazılar…
    </TD></TR></TABLE>

    ÜSTE NASIL ŞERİT KOYACAĞIZ?
    Sol tarafında şerit olan arkaplanı anlattıktan sonra, üst tarafında şerit olan arkaplanı oluşturmayı
    tahmin etmek pek de zor olmayacaktır. Sayfanızın uzunluğu kadar uzun fakat 1 piksel genişliğinde bir grafik dosyası oluşturduktan sonra bu grafiğin üstten dilediğiniz kadar pikselini boyayın ve aşağıdaki kodları yazın. İşte size üstünden şerit geçen bir HTML sayfası. Hayal gücünüzü zorlayarak "uçuk" sayfa tasarımlarını web tarayıcılarının arkaplan döşeme sistemlerinden de yararlanarak uygulayabilirsiniz.

    <HTML>
    <BODY BACKGROUND="ARKA.GIF">
    <TABLE BORDER=0 WIDTH=590><TR><TD HEIGHT=100>
    Şerit üstündeki yazılar
    </TD></TR><TR><TD>
    Ana sayfadaki yazılar…
    </TD></TR></TABLE>

    PÜF NOKTASI: Sayfanızın arkaplanına döşediğiniz grafiğin sabit kalmasını yazıları kaydırdığınızda grafiğin kaymamasını istiyorsanız <BODY BACKGROUND="ARKA.GIF" BGPROPERTIES=FIXED> gibi bir ifade kullanmalısınız.
    bir menüde site haritası :
    BİR MENÜDE SİTE HARİTASI!
    Internet'te rastladığımız bir çok sitede kullanıcının istediği sayfaya kolayca erişebilmesi veya ana sayfaya bir klikleme ile ulaşabilmesi için navigasyon çubukları kullanılır. Kullanıcıyı sürekli olarak web tarayıcısının geri tuşuna basmaktan kurtaran bu özelliği şimdi vereceğimiz kodları sayfanıza ekleyerek uygulayabilirsiniz.
    Aşağıdaki örnek HTML sayfası, içerisinde bir Javascript barındırıyor. Javascript'i kendinize göre özelleştirerek dilediğiniz tipte bir navigasyon menüsüne sahip olabilirsiniz. Dilediğiniz sayfaya gitmek için tek yapmanız gereken ilgili bölümü seçmek ve Git tuşuna basmak.

    <html><head><script language="JavaScript">
    <!--
    function buildArray() {
    var a = buildArray.arguments;
    for (i=0; i<a.length; i++) {
    this[i] = a[i];
    }
    this.length = a.length;
    }
    var urls1 = new buildArray("",
    "http://www..com.tr/",
    "http://www..com.tr/haberler/",
    "http://www..com.tr/rehber/",
    "http://www..com.tr/games/",
    "http://www..com.tr/share/");
    function go(which, num, win) {
    n = which.selectedIndex;
    if (n != 0) {
    var url = eval("urls" + num + "[n]")
    if (win) {
    openWindow(url);
    } else {
    location.href = url;
    }
    }
    }
    // -->
    </script></head>

    <body>
    <form name="form1">
    <select name="menu1">
    <option>Seçiminizi Yapın
    <option>Ana Sayfa
    <option>Haberler
    <option>Internet Rehberi
    <option>PC Games
    <option>Shareware
    </select>
    <input type="button" name="goButton" value="Git!" onClick="go(this.form.menu1, 1, false)">
    </form></body></html>

    Bu anlatıklarımızdan sonra "ama ben navigasyon menümden kim nereye gitmiş kim hangi bölümü kaç kere gezmiş öğrenmek isterim, bilmek isterim" derseniz yine Internet üzerinden bulabileceğiniz bir CGI veya Perl Script'ten faydalanmanızı öneririz.



    varsayılan hedef :
    VARSAYILAN HEDEF
    Frame'lerden oluşan nefis bir sayfa yaptınız ve sol taraftaki frame'i navigasyon için sağ taraftaki frame'i ise içeriği görüntülemek için kullanıyorsunuz. Daha önce <A HREF=… komutuna target="hedef" gibi bir ek vererek ilgili sayfanın hangi frame'de açılacağını tayin edebileceğinizi söylemiştik. Eğer sol taraftaki frame'inizde çok fazla <A HREF=… takısı varsa <BASE TARGET… komutunu kullanmayı düşünebilirsiniz.
    <base target="sagtaraf">
    <a href="sayfa1.htm">Hakkımda</a>
    <a href="sayfa1.htm">Resimlerim</a>
    <a href="sayfa1.htm">Faydalı</a>

    Yukarıdaki gibi kodlar kullandığınızda bu kodları koyduğunuz sayfadaki her bir link sağ taraftaki frame sayfasında açılacaktır.
    varsayılan yazı tipi :VARSAYILAN YAZITİPİ
    Bir sayfa hazırlıyorsunuz ve sayfadaki yazıtipini değiştirmeyi pek düşünmüyorsunuz. Sadece arada bir yazıtipini büyültecek veya küçülteceksiniz. Sizin için böyle bir durum geçerliyse BASEFONT komutunu hatırlatalım. Bu komut tüm bir sayfa için varsayılan bir büyüklük, yazıtipi veya renk belirlemenize olanak sağlar. Böylece yazıtipini hiç değiştirmeden sadece belirli paragraflarda <font size=-1> gibi ifadeler kullanararak varsayılan fontu 1 birim küçültebilirsiniz veya büyültebilirsiniz..
    BASEFONT komutunu şöyle kullanabilirsiniz:
    <BASE FONT COLOR=renk NAME=yazitipi SIZE=büyüklük>
    Yazıtipi büyüklüğü 1-7 değerlerinden birini alabilir. Varsayılan değer 3'tür.
    müthiş bir tag : NOBR
    MÜTHİŞ BİR TAG: NOBR
    Zaman zaman, küçücük olsa da hayli işe yarayan HTML tag'larını sizlere tanıtıyoruz. NOBR'de kullanımı çok basit, işlevi de az ve öz bir komut. <NOBR> ve </NOBR> tag'larını kullanarak bu iki komutun arasına yerleştirdiğiniz yazıların hiç bölünmemesini, sadece bir satıra yer almasını sağlayabilirsiniz. Web tarayıcınız yeri gelse bile bu komutu gördüğünde satırı aşağı kaydırmayacak yatay kaydırma çubuğunu görüntüleyecektir.
    <NOBR>İşte bölünmeyecek bir satır..</NOBR>
    üst simge ve alt simgeÜST SİMGE VE ALTSİMGE
    Web sayfanızda içinde özel bir karakter bulunmayan matematiksel bir fonksiyon kullanmak istiyorsunuz diyelim. Ya da özel bir marka kullanıyor ve TM (c) ifadelerini bu özel markanın sağ üst köşesine yerleştirmek istiyorsunuz. HTML dili tüm web tarayıcılarının desteklediği bu işlemi gerçekleştirmeniz için size iki adet özel takı sunuyor.
    İngilizce uzatmaları Superscript ve SubScript olan bu iki takıyı kullanarak özel metinlerin, normal metnin yarı uzunluğu kadar aşağısında veya yukarısında olmasını sağlayabilirsiniz. Bir metni normal metnin üstüne almak için <SUP> ifadesi ile başlamalı metnin bitiminde ise </SUP> ifadesini kullanmalısınız. Aynı şekilde metnin aşağıda yaralamasını istiyorsanız <SUB> takısını kullanın.

    YAZININ<SUB>Altında</SUB>
    YAZININ<SUP>Üstünde</SUP>
    rengli sayfa giriş çıkışları
    RENKLİ SAYFA GİRİŞ ÇIKIŞLARI
    Internet Explorer 4.0'ın getirdiği en büyük yeniliklerden biri de Aktif HTML sayfaları. Web sayfalarınızı tam bir çoklu ortam şölenine çevirmenize olanak tanıyan bu özellik oldukça karmaşık olması nedeniyle kişisel Web sayfalarını hazırlayanlar tarafından pek kullanılmıyor. Hot Dog, Front Page 98 gibi yeni Web editörleri de Aktif HTML desteği vererek bu standardı oturtmaya olanak tanıyor. Şimdi vereceğimiz püf noktası ise sizi hiç uğraştırmayacak, çünkü vereceğimiz tek bir satır kodu kullanarak sayfanıza giriş ve çıkışlarda Power Point benzeri geçişler oluşturacaksınız.
    Sayfa yenilendiğinde çalışmayan, sadece birisi sayfanıza girdiğinde veya çıktığında geçiş yapan bu özellik Internet Explorer 4.0 ile geldi ve META ifadesi ile birlikte kullanılan tek DHTML komutu olma özelliğini taşıyor. Yanlış okumadınız <HEAD></HEAD> komutları arasına yerleştirilen <META> komutu içine yerleştirdiğiniz yeni bir ifade geçiş yapmaya olanak tanıyor.

    Aşağıdaki satırları HTML sayfanızın ilgili yerlerine girdikten sonra başka bir URL'ye atlayın ve geri dönün, sonuç sizi oldukça şaşırtacaktır. İfadeyi nasıl özelleştireceğinizi aşağıda bulacaksınız.

    <META HTTP-EQUIV="Site-Enter" content="revealTrans(Duration=1.0,Transition=23)">
    <META HTTP-EQUIV="Site-Exit" content="revealTrans(Duration=1.0,Transition=23)">

    Bir çoğunuzun görüp de bu da ne dediğiniz HTTP-EQUIV ifadesinin açılımı şöyle "Hypertext Transfer Protocol Equivilant". Basit olarak bu ifade HTTP protokolünü kullanan HTML sayfasının nasıl görüntüleneceğinini tanımını yapar. "Site-Enter" kelimesi sayfanıza girildiğinde neler olacağını, "revealTrans" ifadesi ise daha önceki sayfanın belirlenen methodla "kaybedileceğini" söylüyor.

    META tag'ı içerisinde kullanılan Duration=1.0 ifadesi geçişi gerçekleştirilen her bir bloğun 1saniye içerisinde işleneceğini, Transition=23 ifadesi ise diğer 22 geçişten bir tanesinin rasgele olarak seçileceğini belirtiyor.

    Geçiş Numaraları:
    Aşağıdaki numaraları siz de örneğimizdeki yerine koyarak nasıl geçişler gerçekleştiğini gözlemleyebilirsiniz. Örneğimizdeki 23 numarasını kullandığınızda ise aşağıdaki numaralardan rasgele bir tanesi seçilecektir.

    # Geçiş
    1 İçten dışa geçiş
    2 Dıştan içe geçiş
    3 Ortadan dışa doğru geçiş
    4 Alttan üste geçiş
    5 Üstten alta geçiş
    6 Soldan sağa geçiş
    7 Sağdan sola geçiş
    8 Soldan sağa dikey çözülme
    9 Üstten aşağı yatay çözülme
    10 8 ve 9'un birleşimi
    11 8'e oldukça benziyor
    12 Piksel piksel çözülme
    13 Dıştan içe dönerek geçiş
    14 İçten dışa dönerek geçiş
    15 Üstten ve alttan geçiş
    16 Ortadan üste ve alta kapanma
    17 Sağdan sola çapraz geçiş
    18 Diğer açıdan sağdan sola çapraz geçiş
    19 17'nin aynısı, aksi yönüne
    20 18'in aynısı, aksi yönüne
    21 Rasgele yatay çizgiler
    22 Rasgele dikey çizgiler
    iki kişiye birden e-mail yollamak
    İKİ KİŞİYE BİRDEN E-MAIL YOLLAMAK
    Bir arkadaşınız ile birlikte bir araya geldiniz ve bir Web sitesi hazırladınız. Giriş sayfanızda da kullanıcıların sizinle iletişime geçebilmeleri için webmaster@geocities.com gibi bir ifade bulunuyor. Malum Geocities bir Web sitesi için sadece bir tane e-mail hesabı açıyor. Web sayfasını birlikte hazırladığınız arkadaşınızın da bir e-mail adresi varsa kullanıcının sadece bir link'e tıklayarak iki kişiye birden e-mail atmasını sağlayabilirsiniz.
    Aşağıdaki satırları HTML sayfasına girip sayfaya Web tarayıcınızla baktığınızda ekranda içinde "E-Mail yollamak için tıklayın!" bir buton göreceksiniz. Muhteşem Web sayfanızı ziyaret eden şanslı kullanıcılar bu butona bastığında artık karşılarına gelecek e-mail penceresinin "cc:" bölümünde arkadaşınızın e-mail adresini konu bölümünde ise "deneme" yazısını görecekler.

    <FORM>
    <INPUT TYPE="button" VALUE="E-Mail yollamak için tıklayın!"
    onClick="parent.location='mailto:dlevitas@.com.tr? subject=deneme&cc=ctarhan@.com.tr'">
    </FORM>
    daha çok açıklama :DAHA ÇOK AÇIKLAMA
    Sayfalarınızdaki Internet kısayollarının ne işe yaradıkları hakkında kullanıcılarınıza daha çok bilgi mi vermek istiyorsunuz? Kısayollar ile birlikte TITLE="…" komutunu kullanarak kullanıcının kısayol üzerinde iki saniye durduğunda bir yardım balon ile kısayol hakkında daha geniş bilgi almasını sağlayabilirsiniz. Resim, yazı ve tıklanabilir harita gibi tüm kısayol tiplerinde kullanabileceğiniz bu özellik sayfada fazla yeri kalmayıp açıklama yapmak isteyenler için…
    <a href="http://www..com.tr" title="Genç Kızların Sevgilisi
    deneme!"> deneme</a>
    daha gelişmiş satır sonu
    DAHA GELİŞMİŞ SATIR SONU
    HTML 1.0 standardı ile gelen en basit komutlardan biri <BR> dir. Satır sonunu ifade eden bu takı kullanıldığında satırın neresinde olunursa olsun yeni bir satıra başlanacaktır. <P> ifadesinden farklı olarak bu komut yeni bir paragraf oluşturmak için kullanılmamalıdır. HTML 3.2 ile birlikte bu komuta bir de CLEAR özelliği eklendi. <BR> komutunun resimlerle birlikte kullanıldığında fonksiyoneliğini arttırmak için kullanılabilecek bu özelliğin tag içinde kullanımı şöyledir:
    <BR CLEAR=NONE|LEFT|RIGHT|ALL>

    İlgili metnin resmin altında mı yoksa yanında mı görüneceğini belirler. Varsayılan değeri NONE'dır.
    NONE Bir sonraki yazı resmin hemen yanında görüntülenir.
    LEFT Bir sonraki yazı resmin altında sol marjin'in hemen yanında görüntülenir.
    RIGHT Bir sonraki yazı resmin altında sağ marjinin hemen yanında görüntülenir.
    ALL Bir sonraki yazı resmin altında sağ ve sol marjinlerin yanında görüntülenir.
    tablo çeerçevelerine kontrol
    TABLO ÇERÇEVELERİNE KONTROL
    Tablolarda BGCOLOR ifadesini kullanarak hücrelerin veya tüm bir tablonun arkaplan rengini tayin edebilirsiniz. Peki tablo çerçevelerinin de renklendirilebileceğini biliyor muydunuz? BORDER takısı ile kalınlığını tayin ettiğiniz tablo çerçevelerinin ışık gören ve görmeyen yönlerini yine HTML komutlarını kullanarak değiştirebilirsiniz. Bunu gerçekleştirmek için tek yapmanız gereken <TABLE…> komutu içerisinde BORDERCOLORDARK, BORDERCOLORLIGHT ifadelerini veya bu iki takının yerini tutan BORDERCOLOR ifadesini kullanmak. Adlarından da anlaşılabileceği gibi BORDERCOLORDARK tablo çerçevesinin gölgeli kısmını diğeri ise çerçevenin ışığa bakan kısmını renklendiriyor. Sadece BORDERCOLOR kullanıldığında çerçevenin tüm kısımları aynı renge boyanıyor.
    <table border="5"
    BORDERCOLORDARK="navy"
    BORDERCOLORLIGHT="blue">


    birkaç tane tagler

    pre tagi
    Sihirli bir TAG: <PRE>
    HTML haline dönüştürmeye üşendiğiniz ve Internet'te aynen yer almasını istediğiniz bir metin var diyelim. Fakat bu metni HTML sayfası içine yerleştirdiğinizde ve web tarayıcınız aracılığıyla görüntülediğinizde bütün formatlamalar ve paragraflar yok oluyor... İşte bu aşamada bir tag imdadınıza koşar ve tüm metni HTML'ye dönüştürmenize gerek kalmaz. <PRE> ile başlayan metin aynen not defterinde göründüğü gibi görünür, tüm sekme karakterleri, ENTER karakterleri HTML sayfası içinde yer alır. Metnin eski haline dönmesi için </PRE> kullanılması yeterlidir. Her gülün bir dikeni olduğu gibi bu gülün de bir kötülüğü uzunluğu bir sayfayı geçen metinleri bir alt satıra kaydırmamasıdır, metnin tamamının görünebilmesi için kullanıcı sayfayı sağa doğru kaydırmalıdır.
    plaintex
    SİHİRLİ BİR TAG: <PLAINTEXT>
    Ellerinizle hazırladığınız nadide bir web sayfasına, uzunca bir paragraf eklemek istiyorsunuz diyelim. Fakat paragrafı formatlamanız çok uzun zaman alacaktır; üstelik paragrafı HTML sayfanıza olduğu gibi koyarsanız tüm paragraflar ve sekme karakterleri yok olacak. Geçen ay bahsettiğimiz PRE tag'ını kullandığınızda bu sefer başka bir sürprizle karşılaşacak ve genişliği bir sayfadan fazla olan satırları ekranda göremeyeceksiniz. İşte bu aşamada bütün bunları ortadan kaldıran bir tag yardıma koşuyor.
    Web tarayıcınız sayfa içerisinde <plaintext> tag'ını gördüğü anda <plaintext>e kadar olan kısmı not defterinde görünüyormuş gibi gösterir. İki takı arasında kalan hiç bir tag göz önüne alınmaz ve normal bir metinmiş gibi işlem görür.
    topmargin ile leftmargin
    Sihirli İki Tag: topmargin ve leftmargin
    Sayfanızda sol üst köşeye dayamanız gereken bir resim, bir yazı ya da bir tablo bulunuyor diyelim. Web tarayıcınız ise her HTML sayfasında soldan ve üstten yarım santimetre pay bırakmakta kararlı görünüyor.
    Bunu önlemenin bir yolu var: <BODY... tag'ının yanına getireceğiniz topmargin= ve leftmargin= ekleri, sayfanın marjin ayarlarını sizin belirlemenizi sağlayacaktır. Ölçünün piksel olduğu bu iki ekin kullanımı şöyledir:

    <body bgcolor="#ffffff" topmargin=0 leftmargin=0>

    eklerin sadece birisini ya da ikisini birden kullanabilirsiniz. Eklerden birini kullanmadığınızda Web tarayıcısı o ek için varsayılan değeri yani yarım santimi kullanacaktır. (Bu iki ek sadece Internet Explorer 2.0 ve üstü Web tarayıcıları için geçerlidir.)
    bir büyük , bir küçükBir Büyük, Bir Küçük...
    Sayfalarınızda sık sık yazıtipi büyüklükleriyle oynuyorsanız belki şimdi anlatacağımız iki tag'ı bilmek işinizi biraz kolaylaştırabilir. <FONT SIZE=n> ile büyüklüğünü değiştirdiğiniz yazı tipinin büyüklüğünü geçici olarak tekrar büyültmek veya küçültmek için kullanabileceğiniz <BIG><SMALL> komutları sizi yazıtipini tekrar <FONT SIZE> ile değiştirmekten kurtarır.
    <font size=' +1' >xxxxxxx<font size=' -1' >xxxx</font>xxx<font size=' +1' >xxx </font>xxx</font>

    Yukarıdaki gibi kodlar yazmak yerine sadece

    <big>xxxxxxx<small>xxxx</small>xxx<big>xxx </big>xxx</big>

    kullanmanız yeterli olacaktır.
    eksra boşluk bırakmakEkstra Boşluk Bırakmak
    Bildiğiniz gibi HTML sayfalarını yazarken SPACE tuşuyla arkanızda ne kadar boşluk bırakırsanız bırakın bastığınız tüm boşluk karakterleri sadece 1 adet görünecektir. Örneğin sayfadaki TÜRKİYE yazısı web tarayıcısının penceresinde TÜRKİYE olarak belirir. Peki ekstra boşluk yazmak için ne yapmalı? Standartları koyan arkadaşlar bunu da düşünmüş ve boşluk karakteri için ' Non-Breaking Space' anlamına gelen &nbsp; karakter grubunu uygun görmüş. Böylece uygun gördüğünüz yerlerde &nbsp; kullanarak boşluk bırakabilirsiniz
    özel karakterler
    Özel Karakterler

    SAYFALARINIZDA, sık kullanılan özel karakterleri kullanabilmeniz için gerekli olan kodları aşağıda veriyoruz. Bu kodları yazılarınız içinde kullanarak istediğiniz karakterlerin Web tarayıcısının penceresinde belirmesini sağlayabilirsiniz.
    < - &lt
    > - &gt
    boşluk - &nbsp
    (c) - ®
    (r) - ©
    ¶ - ¶
    TM - ™
    @ - @



    ___________SAYGILAR..._________________________



  2. Alev
    Özel Üye

    Html Dersi Makalesine henüz yorum yazılmamış. ilk yorumu siz yapın


Sponsor Bağlantılar
+ Yorum Gönder
5 üzerinden | Toplam : 0 kişi