bilgiz.org

Temel Bilgisayar Teknolojileri Kullanımı

  • 1. İNTERNET ORTAMI VE WEB TASARIMI
  • 1.1.1. IP (Internet Protocol) Numarası
  • 1.1.2. İnternet Alanı (Domain)
  • 1.3.1. Sayfa Hazırlarken Dikkat Edilecek Noktalar
  • 2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
  • Başlık 1 Başlık 2



  • Tarih30.09.2017
    Büyüklüğü356.23 Kb.

    Indir 356.23 Kb.
    imi ile satırları Tablo Başlığı (thead)








    Şekil 2.9








    powerpluswatermarkobject19928359





    KBT117



    WEB TASARIMININ TEMELLERİ

    Öğr. Gör. İlker TÜRKER

    iturker@karabuk.edu.tr


    KBUZEM

    Karabük Üniversitesi

    Uzaktan Eğitim Araştırma ve Uygulama Merkezi

    Referanslar

    MEGEP Eğitim Modülleri

    HTML Ders Notları (İlker Türker)

    1. İNTERNET ORTAMI VE WEB TASARIMI

    1.1. İnternet


    İnternet, bir çok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli büyüyen bir iletişim ağıdır. Aynı zamanda, insanların her geçen gün gittikçe artan “üretilen bilgiyi saklama / paylaşma ve ona kolayca ulaşma” istekleri sonrasında ortaya çıkmış bir teknolojidir. Bu teknoloji yardımıyla pek çok alandaki bilgilere insanlar kolay, ucuz, hızlı ve güvenli bir şekilde erişebilmektedir.

    1.1.1. IP (Internet Protocol) Numarası


    IP (Internet Protocol), bilgisayarların iletişim kurmasını sağlayan standart bir protokoldür. Genel olarak her bilgisayarın kendine özel bir numarası vardır. İki bilgisayar iletişim kurduğu zaman birbirlerini bulmak için IP adresini kullanır. IP adresi her biri noktayla ayrılan ve 0 ile 255 arasındaki rakamlardan oluşmuş 4 adet numara setidir.

    Örneğin:
    192.168.123.254. Bilgisayarın networkte bir “adı” olsa bile (daha kolay hatırlamanız için), diğer bilgisayarlarla iletişim kurduğunda IP adresini kullanır.

    1.1.2. İnternet Alanı (Domain)


    İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır (162.178.111.24 gibi). Bu numaraları akılda tutmak ve herhangi bir anda yazmak zor olduğundan, alan adı (domain name) sistemi adını verdiğimiz bir isimlendirme oluşturulmuştur. Herhangi bir bilgisayara (ve o bilgisayar üzerinde yayınlanan WEB sitelerine) bağlanmak için karmaşık IP numaralarını akılda tutmak yerine, hatırlanması ve yazılması kolay alan adlar kullanılmaktadır (www.google.com gibi). Siz tarayıcınızın adres çubuğuna www.meb.gov.tr yazdığınızda, tarayıcınız merkezi bir bilgisayarla iletişim kurarak www.meb.gov.tr adresinin yerini tuttuğu IP numarasını öğrenecek ve bu IP numaralı bilgisayara bağlanarak istediğiniz bilgilere erişmenizi sağlayacaktır.

    İnternet adreslerinde görülen kısaltmalar şunlardır:

    gov: Hükümet kurumları (government)

    edu: Eğitim kurumları (education)

    org: Ticari olmayan kuruluşlar (organization)

    com: Ticari kuruluşlar (company)

    mil: Askeri kurumlar (military)

    net: Servis sunucular (network)

    ac: Akademik kuruluşlar (academic)

    int: Uluslararası kuruluşlar (international)

    Bunun yanında kullanılan ülke kısaltmaları da vardır.



    Bazıları; tr:Türkiye, jp:Japonya, uk:İngiltere, it:İtalya, ch:Isviçre gibi.

    1.2. WEB Tarayıcılar


    WEB tarayıcısı, internet üzerindeki tüm bilgilere bakabilme ve bu bilgilerle etkileşim halinde olabilme olanağı veren bir uygulama programıdır. Tarayıcı kelimesinin İngilizce karşılığı “browser”’dır. WEB tarayıcısı, Yardımlı Metin Transfer Protokolü'nü (İngilizcesi "Hypertext Transfer Protocol" - kısaca HTTP) kullanarak, tarayıcı kullanıcısı adına İnternet üzerinde WEB sunucularından isteklerde bulunan bir istemci programdır.

    1.3. WEB Tasarımı

    1.3.1. Sayfa Hazırlarken Dikkat Edilecek Noktalar


    Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kaydedilirken asla Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz.

    Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz bir dizin ve bu dizin içerisinde resimleri ya da animasyonlarınızı kaydedeceğiniz bir alt dizin oluşturunuz. Sunucu bilgisayarına bu bilgiler atılırken (upload) aynı dizinleri bu alanda oluşturmak gerektiği asla unutulmamalıdır.

    WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html olarak adlandırınız. Birçok WEB sunucu için varsayılan sayfa index.html'dir. Bazı sunucular da varsayılan sayfanın default.html olarak adlandırılmasını ister.

    1.3.2. Görsel Tasarım


    Günümüzde içeriği tayin ederken sayfamızın amacı uzun uzun bilgi vermekse, “Nasıl olsa kimse okumuyor!” diye bu bilgileri kırpmak, gerçekten o bilgiye ihtiyacı olan kişilere haksızlık olur. Sayfamızın bir hareket noktası, bir geçiş noktası olduğunu tahmin ediyorsak, kimseyi fazla oyalamaya, istemediklerini bildiğimiz bilgileri zorla vermeye de hakkımız yoktur.

    Yale Tıp Fakültesi’nin, ekrana bakan kişinin göz hareketlerini belirleyen cihazlarla donattığı bilgisayarların başına oturttuğu 12 bin kişiyle yaptığı araştırma bir bilgisayar ekranının görsel taranma çizgisinin, (1) soldan üst köşeden sağ üst köşeye, (2) sağ üst köşeden sağ alt köşeye doğru genel tarama (3) yeniden sol üstten itibaren okuma ve (4) üst orta noktadan aşağı doğru okumayı sürdürme tarzında olduğunu gösteriyor. Buna göre, izleyici WEB sayfasında önce büyük şekil kitlesini ve renkleri görmekte, ön plandaki unsurlarla arka plandaki unsurlar arasındaki kontrastın farkına varmaktadır. İzleyici ancak daha sonra, varsa grafik unsurların verdiği bilgiyi almakta, üçüncü olarak da okumaya başlamaktadır. Okuma tahmin edilebileceği gibi, en büyük kitleden benzetme yoluyla başlamakta ve daha sonra kelimelere inmektedir.

    Bu belirleme, bize, WEB sayfasının bütünü itibariyle mükemmel bir grafik dengesine sahip olması gerektiğini gösteriyor. Salt metinden ibaret gri bir sayfa itici ve sıkıcı iken, büyük ve geniş grafikler, büyük ve kara lekeler halindeki harfler özellikle içerik arayan daha rafine izleyiciye “içi boş” izlenimini verecektir. Grafik sanatçı, bu noktada sayfanın beklenen “müşterisi”nin varsayılan ilgi odağını, grafikle metni dengeleyerek bulmak zorundadır.

    Bu dengede oran ve uygunluk, sadece sayfanın hedef kitlesi ya da başka bir deyişle sayfanın içeriği dikkate alınarak bulunabilir.

    Yazıyı soldan sağa doğru okumaya alışmış toplumlarda, görsel dikkatin ekranda da soldan sağa doğru gitmesi doğaldır. Bu nedenle WEB sayfalarında da ekranın üst yarısı, görsel odak noktası olmalıdır. Bu alanın mümkün olduğu kadar yumuşak, pastel renklerle doldurulması; sert, aşırı yoğun çarpıcı renklerden kaçınılması gerekir. Bu tür renkler ancak çok fazla dikkat çekmek istediğimiz, bir ya da iki unsur için saklanmalıdır. Yazılar mutlaka arkalarındaki zeminle çarpıcı bir kontrast oluşturmalıdır. Dramatik ve karmaşık grafikler, mutlaka grafik sanatçıları tarafından yapılmalıdır.

    Metinleri daha belirgin hale getirecek noktalar, kutular, yatay ve dikey çizgiler, çoğu zaman görsel bütünlük sağlamak yerine sayfanın tümüne yama hissi verir.

    Bütün görsel tasarımlarda olduğu gibi, WEB sayfası tasarımında da tutarlılık şarttır.

    Grafik unsurlarla “stil” oluşturmaya kalkmak, grafikçilerin işidir. Bir WEB alanının başından sonuna tutarlı bir şekilde izlenen grafik uygulama, sonunda izleyicide WEB alanının sahibi kurum hakkında bir yorum uyandırır. Bu nedenle sırf süsleme amacıyla, sayfaların orasına burasına çizgi ya da fotoğraf unsurları konulmamalıdır. Özellikle çizgi grafiklerin üç boyutlu görünmesini sağlamak gerektiği inancı, günümüzde hemen hemen bütün WEB tasarımına egemen olmuş ve hemen hemen her grafik unsurun bir tarafına gölgeler yerleştirilmiş bulunuyor. Gölge, bir görsel öge olarak kullanılacaksa, sayfanın tümünün bir bütün olduğu unutulmamalıdır. Bir unsurun gölgesi sağa aşağı, diğerininki sola yukarı düşemez.

    Ana sayfa izleyicinin bizim WEB alanımıza daldığı noktadır. Bu nedenle sayfada bir davet unsuru olması şarttır. Bu sayfanın az ve öz unsur içermesi de giderek yaygın bir tarz olmaya başladı. Bir gazete veya derginin WEB alanı, yayınladığı organın kapak sayfasına benzeyebilir. Ama bir üretim firması, ana sayfasında hiç değilse belli başlı mal gruplarının bağlantıları olmalıdır.

    Çoğu internet’e modemle bağlanan izleyiciler için, küçük grafiklerin geniş alanlar işgal etmesini sağlayan, başlıklardan ve beyaz alanlardan yararlanan, buna karşılık görsel etkisi son derece yüksek sayfalar yapılması mümkündür.


    2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ

    2.1. HTML Nedir?


    HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web’ in temel dilidir. Html dökümanları kaynak kodları Browserlar tarafından görüntülenebilen, tamamen  ASCII karakterlerden oluşmuş metin dosyalarıdır. Html bir programlama dilinin karmaşıklığından oldukça uzak basit bir dildir. Html kullanarak çalıştırılabilir bir dosya elde edilmez.

    < > işaretleri arasındaki komutlar Html imleri, ya da Html komutları olarak bilinir.Bir Html dosyası her zaman imi ile başlar. Ve bu imin kapatılmasıyla son bulur. Bir sayfa açılmak istendiğinde web server Browsera (tarayıcıya örn : i.explorer) gerekli dosya ya da dosyaları gönderir ve Browser eline geçen bu malzemeyi yorumlamaya başlar. İşte bir Html dosyası Browsera Html dosyası olduğunu ilk satırındaki imi ile söyler. Daha sonra bu imi imi takip eder. iminin görevi bitince şeklinde sonlandırılır ve ardından sayfa içeriğinizi taşıyan iminin sırası gelir. Sayfa içeriğinizi oluşturan imler bitince, , <p>Bir etiket <etiket_adi> şeklinde başlar ve bazı etiketler dışında </etiket_adi> şeklinde biter. </p> <p>Etiketler iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. Kodların okunabilirliğini artırmak için bir etiket bitmeden tekrar etiket açılırsa içeride açılan etiket biraz daha içeriden yazılmalıdır. <br /> <br /><i><u>Kullanım biçimi: </u></i> <br /> <br /><tag_1> <tag_2> ...... </tag_2> </tag_1> <br /> <br /><b>Örnek: </b> <br /> <br /><HTML> <body> </p> <p>...... <FORM> ...... </FORM> </p> <p>WEB sayfasında standart olarak bulunması gereken kodlar şunlardır. Bunlar sayfada mutlaka vardır. Bu kodlarla tarayıcı bunun bir WEB sayfası olduğunu anlar ve ona göre görüntüler. <br /> <br /><html> <head> <br /> <br /><title> Sayfanın Başlığı

    Sayfanızın tüm içeriği: resim, yazı, video, vb.

    ....

    Kodun BODY kısmında n> imini kullanarak metin kısmında bir başlık oluşturun. n, oluşturacağınız başlığın seviyesi, bir başka deyişle büyüklüğüdür ve 1’den 6’ya kadar değer alır. H1 en büyük, H6 en küçük başlığı oluşturur. İsterseniz başlığı hizalamak için

    yazın. Direction için right, left ya da center yazmalısınız. Başlığı yazdıktan sonra n> imi ile başlığı kapatın.

    Başlık seviyesi (H1, H2,......,H6) için temel tarayıcılar Times New Roman 24,18,14,12,10,8 boyutlarını kullanırlar. Bir başlıktan sonra otomatik olarak satırbaşı oluşturulur yani
    imini kullanmanız gerekmez.
    kapatma iminin kullanımı tercihe bağlıdır yani kullanmayabilirsiniz.

    Paragraflar arasında otomatik olarak bir miktar boşluk bırakılır. Paragraflar arasına extra boşluk eklemenin hızlı bir hilesi,


    yazmaktır (non breaking space).

    WEB Sayfanızı Kaydedin:

    Word ya da Notepad’de oluşturduğumuz HTML kodunu kaydetmek için File|Save As komutunu verin. Biçim için salt metin (text only), metin belgesi (text document) ya da ASCII’yi seçin. Belge ismine .htm ya da .html uzantısını yazın. Save’e tıklayın.

    Word’de “Save As HTML” yi seçmeyin!!!

    Açılış sayfanızı index.html ya da default.html olarak kaydedin.

    Belgede yaptığınız değişiklikleri kaydettikten sonra kapatmadan, tarayıcıda Refresh butonuna tıklayarak değişiklikleri gözleyebilirsiniz.

    Metin Biçimlendirme

    Bu bölümde öğreneceğimiz imler:



    • Başlık imleri:

      ...



    • Paragraf imi:
      ...


    • Ortalama :
      ...


    • Diğer imler : ...,...,...

    HTML'de metin stillerini üç şekilde belirleyebiliriz:

    1. Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir imle biçimleme stili. Buna in-line (aynı satırda) biçimlendirme denir.

    2. Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme)

    3. HTML dosyasının dışında başka bir stil dosyası oluşturarak stil için bu dosyayı kullanma. Buna Cascading Style Sheets-Yığılmalı Stil Yaprakları deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor.

    Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekliyorlar.

    Biz burada ilk metodu kullanarak biçimlendirme yapacağız. Bunun için boş bir Word belgesi açıp yazmaya başlayalım:





    Başlık İmleri


    Başlık 1


    Başlık 2


    Başlık 3


    Başlık 4


    Başlık 5

    Başlık 6


    Sayfama Hoşgeldiniz

    >

    HTML imleri ile,

    Yazıları
    koyu


    italik
    ve
    altı çizili
    olarak yazabiliyorum

    pazartesi


    salı
    çarşamba

    ocak
    şubat


    mart
    nisan
    İlkbahar

    Yaz

    Sonbahar Şekil 2.5 Yazı biçimlendirme

    Kış
    bundan sonra metnin belli kısımlarının rengini FONT iminde COLOR özniteliğini kullanarak değiştirebilirsiniz.

    rengi değişecek metin

    Üstindis ve Altindis oluşturmak:

    Üstindis oluşturmak için , altindis oluşturmak için imleri kullanılır. Bu imlerin kapama imleri de vardır. Tarayıcılar alt ve üstindislerin boyutlarını otomatik olarak biraz düşürürler. Yine de siz biraz daha düşürmek isterseniz bu imlerin içinde FONT imiyle küçültme yapabilirsiniz. Örneğin yazmak için:

    [xa+Y]m

    ya da örneğin altindis olan a’yı biraz daha küçültmek için:

    [xa+y]m

    yazabiliriz.



    Eşaralıklı yazıtipi:

    Courier yazıtipindeki gibi daktilo yazısı oluşturmak için ... ; veya ... imlerini kullanabilirsiniz.



    Yorum eklemek:

    Yalnızca kodunuzda yer alacak, tarayıcıdaki görüntüye hiçbir etkisi olmayacak yorum satırları eklemek için:

    şeklinde bir satır ekleyebilirsiniz. Yorum metinleri kodu inceleyenler için kolaylık ya da hatırlatma amacı taşırlar.
    Resimlerin Kullanımı

    Hatırlatmalar:

    Web sayfasının hızlı açılmasınısağlamak için düşük dosya boyutlu resimler kullanılmalı. GIF ya da JPG formatındaki sıkıştırılmış resimler tercih edilmeli.

    Web için yüksek çözünürlük gerekmemektedir. 72 piksel/inch değeri yeterlidir.

    Photoshop’ta resim boyutlarını küçültmenin yolu: Image|Image Size ile açılan pencerede yeni boyutlar girmek.

    Tarayıcıların tanıdığı renkleri kullanmak için Color kutusunda “Only Web Colors” seçeneği işaretlenmeli, ya da “swatches” paleti kullanılamlıdır.

    Resmi sonradan tarayıcı güvenli renklere dönüştürmek için: Image|Mode|Indexed Color komutunu vermelidir.

    Image Ready programında Optimize paletinde istemediğimiz renkleri eleyerek ya da renk sayısını düşürerek boyut düşürmelidir.

    Yine Optimize penceresinde Blur seçeneği işaretlenerek resme bulanıklık verilebilir.



    Sayfaya resim yerleştirmek:

    “abant’ta

    image.jpg, resim dosyasının sunucudaki konumudur. BORDER özniteliği kullanılmayabilir. Piksel cinsinden kenarlık değeri girmek için kullanılır. Resmi kendi satırından başlatmak için resimden önce


    ya da
    imini kullanın.

    ALT özniteliği, fare resmin üzerine getirildiğinde ya da resim yüklenemediğinde görüntülenecek alternatif metin girmek için kullanılır.



    Resim için boyut belirtmek:

    Web sayfası tarayıcı tarafundan yüklenirken HTML kodunda yer alan resminiz yüklenmeden onu takip eden metin yüklenmez. Fakat resim için boyut belirtirseniz tarayıcı resim için yer ayırıp metin yüklemeye devam edebilir. Böylece sayfa daha hızlı yüklenmiş olur. Boyut belirtmek için HEIGHT ve WIDTH özniteliklerine piksel cinsinden değerler atanır:



    “abant”

    Düşük çözünürlüklü resimler kullanmak:

    Resminiz tam olarak yüklenmeden önce daha çabuk olarak düşük çözünürlüklü bir örneğinin ekrana gelmesini isteyebilirsiniz. Bunun için önceden bu düşük çözünürlüklü örneği oluşturup LOWSRC özniteliğinde bu resmi, SRC’de ise asıl resmi göstermeniz gerekir:



    .......

    Burada abant.jpg asıl resminiz, abant2.jpg düşük çözünürlüklü resminizdir.



    Resimlerin çevresine metin yerleştirmek:

    Bunun için ALIGN özniteliği kullanılır (yalnızca left ve right değerleri ile). Left değeri resmi sola, metni onun sağına; Right değeri resmi sağa, metni onun soluna yerleştirir.





    Metin sarımını durdurmak:

    Bir resmi metinle sardığınızda (yukarıdaki işlem), yanında resim kalmayıncaya kadar metin resmin yanında devam edecektir. Metnin sol yanında resim kalmayana kadar sarımını durdurmak için
    , sağ yanında resim kalmayana kadar sarımını durdurmak için
    , her iki yan için ise
    yazabilirsiniz.



    Örnek:

    Sportif Faaliyetler



    <H1>SPORTİF FAALİYETLER



    “atletizm” Okulumuz bünyesindeki sportif faaliyetler Öğr.Gör.Emrah Deniz tarafından yönetilmektedir.


    Bu yıl ikincisi düzenlenen müsabakalarda...

    resminizi sabit bir filigran yapmak isterseniz imi kapatmadan BGPROPERTIES=FIXED yazın.



    Sayfadaki Öğeleri Ortalamak:

    Sayfada ortalamak istediğiniz tüm öğeleri

    ve
    imlerinin arasına alarak ortalayabilirsiniz.



    Kenar Boşluklarını Belirtmek:

    Tarayıcılar otomatik olarak pencerenin kenarları ile metin arasında belli bir boşluk bırakırlar. Bu boşluklara web tasarımınızda siz karar verebilirsiniz:



    Ancak bu öznitelikleri sadece i.explorer tanır. Netscape için bunların yerine MARGINWIDTH ve MARGINHEIGHT özniteliklerini kullanmanız gerekir. HTML kodunuzu her iki tarayıcıya anlaşılır kılmak için body imi içinde bu özniteliklerin tümünü birden kullanmanız gerekir.



    Satırları Bir Arada Tutmak:

    Belgenizde satır sonuna denk geldiğinde bölünmesini istemediğiniz kelimeler varsa:



    kelimeler

    imlerini kullanın. NOBR imindeki kelimeler birbirinden ayrılmazlar.



    Seçimli Satır Sonu:

    Bazı kelimelerinizin yalnızca satır sonuna geldiğinde bölünmesini, aksi halde bir arada kalmasını istediğiniz durumlarda imini kullanın:



    Karabük Meslek Yüksek Okulu

    Liste ile Girinti Oluşturmak:

    Liste şeklinde tamamı girintili bir paragraf oluşturmak için:



      metin
    yazın.

    Blok Alıntılar:

    Belgenizde başka bir kaynaktan yaptığınız alıntıları farklı biçimde görüntülemek için alıntı metnini

    ve
    imlerinin arasına alın. Bu imler arasında istediğiniz biçimlendirme araçlarını (ör.


    )kullanın.

    Ön Biçimlenmiş Metin:

    Tarayıcılar sizin HTML kodunda kullandığınız paragraf, tab gibi özellikleri göz önüne almadan yalnızca


    ,
    gibi imleri değerlendirirler. Ancak tarayıcının, metnin belli bir kısmında girdiğiniz satır sonları ve aralıkları tanımasını istiyorsanız bu kısmı
    ve
    imlerinin arasına almanız gerekir.

    2.4 Listeler


    HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar;

    1. Sıralı listeler (ordered list)

    2. Sırasız listeler (unordered list)

    3. Tanımlama listeleri (definition list)

    Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır.

    Sıralı listeler:

    Liste içine alınacak metinler

      ...
    imleri arasına alınarak yazılır. Bu imler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise
  • (list item) imini getiriyoruz. Bu imte tıpkı


    imi gibi sonlandırılmıyor.
      imine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz. Compact değeri ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.

      Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde) bölümünü yazıp diğer kısımlarının yazılmış olduğunu varsayacağız.



      <h4>Numaralandırılmış bir liste:



      1. Kahve


      2. Çay


      3. Süt


      Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta mümkün. Dikkat edeceğimiz nokta, işe

        imi ile başlayıp liste maddelerinin her birisinin başına
      1. imini getirmek ve listelemeyi bitirmek istediğimiz yerde
      imini yazmak. Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar
        imini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz. Type özniteliğinde kullanabileceğimiz değerler şunlar olabilir; sayılar,harfler (küçük/büyük)ve romen rakamları (i,ii,iii gibi)



        Sırasız Listeler:

        Bu tip listede de mantık aynı. Fark, listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar,kareler kullanabilmemiz.

          imi yerine
            imini kullanıyoruz, maddeler için kullandığımız
          • imi burada da geçerli.
              için parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare). Compact özniteliği sırasız listelerde de kullanılabiliyor.



              <h4>Numarasız bir liste:



              • Kahve


              • Çay


              • Süt




              Tanımlama listeleri:

              Bu listelemede kullanılan imler şöyle;

              ...
              ,
              ...
              ,
              ...
              . Listenin maddelerini belirtmek için kullandığımız
            1. iminin yerini burada
              ve
              imleri alıyor. Aynı şekilde
                ...
              veya
                ...
              imleri arasına aldığımız listeyi bu sefer
              ...
              arasına yazıyoruz. Yine parametre olarak
              imi içinde compact ifadesini kullanabiliriz (zorunlu değil).



              Örnek:

              Derslik Dağılımı:





              2. Kat:

              2. katta sırasıyla 203, 204, 205 ve Çizim Salonu bulunmakta. 203 ve 204 sınıfları geniş olup anfi olarak kullanılmaktadır.

              3. Kat:

              3. katta ise bu sene yeni kullanıma açılan 303 ve 306 nolu sınıflarla beraber 304, 305 ve 307 (Bilgisayar Laboratuarı) sınıfları bulunuyor. Geçen sene 303 ve 306 nolu sınıflar KTEF tarafından elektronik ve bilgisayar laboratuarı olarak kullanılamaktaydı.

              307 Bil.Lab.:

              Bilgisayar Laboratuarında 28 adet bilgisayar bulunmakta. KMYO bünyesindeki...

              Örneğe ait tarayıcı görüntüsü Şekil 2.7’de görülmektedir.



              Şekil 2.7 Tanımlama listeleri


              2.5 Linkler


              HTML’nin en önemli unsurlardan birisi bağlantılardır (linkler). Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir tıklama bizi istediğimiz yere götürecektir. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür. Bu yolla ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri gibi yerlere bağlantı yapmak mümkündür. Hatta yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı da olabilir.

              Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim:

              ...

              Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkündür.



              Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim; ... imi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir.

              buraya tıklandığında meyve resmi açılacak

              Bu örnekte "buraya tıklandığında meyve resmi açılacak" yazısına bağlantı özelliği kazandırdığımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladığında browser o anda açık bulunan sayfa ile aynı dizinde bulunan “meyve.gif” resmini açacaktır.

              sıkıştırılmış dreamweaver dosyalarını çekmek için tıklayın

              İkinci örnekte aynı şekilde "dreamweaver dosyalarını çekmek için tıklayın" yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte meyve.gif'e tıklandığında browser resmi açacaktır fakat bu örnekte browser kullanıcıya "dream.zip" dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyememesidir.

              2.sayfaya gitmek için tıklayın

              Üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa isimli başka bir html dökümanı açılacaktır.

              kedi resmi


              güzel bir karanfil
              yeni megane

              Bu 3 örnekte altdizinlere ve üstdizinlere verilen bağlantıya misaller görüyorsunuz. İlk ikisinde alt dizinlere bağlantı verildi. Son örnekte ise “../” yazarak üst dizine geçilip bu dizinden “araba/megane_II.jpg” URL’si gösterildi.

              ziyaret edin

              Bu örnekte bir internet adresi verdik.

              tıklayın dosyaları indirin

              Bu ise bir ftp adresine verilen link örneği.

              mail atın

              Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.

              Metinlere bağlantı vermeyi öğrendik, sayfadaki resimlere link vermek için resmi yerleştirmek için kullandığımız:

              imini ... iminin arasına alıyoruz. İşte örnek;



              resim.gif tıklanacak resmi, sayfa1.htm resme tıklandığında açılacak sayfayı gösteriyor. "Border" komutu ise resimde bağlantı özelliği olduğunu belirten çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu komutu değişik sayılarla deneyebilirsiniz.



              Çapa oluşturmak:

              Kullanıcının sayfanızın belirli kısımlarına atlamasını istiyorsanız bir çapa oluşturmanız ve linkte bu çapayı göstermeniz gerekir. Bunun için metnin belli (çapa koyulacak) kısımlarına:

              Çapanın Etiketi yazın.

              Çapaya Link Oluşturmak:

              Oluşturmuş olduğunuz çapalara link tanımlamak için:

              Etiket yazın.

              Çapa ayrı bir belgenizde ise:

              yazın.

              Çapa başka bir sunucudaki bir sayfada ise:

              yazın.

              Target özniteliği:

              Son olarak bağlantının açılacağı pencereyi belirtmek için kullanılan "target" özniteliğini öğrenelim;

              Kullanımı:



              target="_blank": Bağlantı yeni bir pencerede açılır.


              target="_self" : Bağlantı aynı pencere içerisinde açılır.
              target="_top" : Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
              target="_parent": Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
              target= "çerçeve adı": Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.

              Linkler için klavye kısayolları:

              yeni megane ALT+B tuşlayın.

              Burada “yeni megane” linki için ACCESSKEY özniteliği ile ALT+B tuşu kısayol olarak tanımlanmış, bu kısayol tuşu zorunlu olmamakla beraber “ALT+B tuşlayın” ifadesi ile kullanıcıya bildirilmiştir.

              Sekme sırası belirlemek:

              Kullanıcının tab tuşuyla linkler arasında gezerken dolaştığı sıralamayı değiştirmek isteyebilirsiniz. Bunun için TABINDEX kullanılır:

              yeni megane

              Burada TABINDEX için girdiğimiz 1 değeri, bu linkin tab tuşu için 1. öncelikli olduğunu belirtiyor. Farklı linkler için aynı TABINDEX değerini girerseniz, aynı öncelikli linkler, HTML kodundaki sıralarına göre tab tuşuyla dolaşılır.


              2.6 Tablolar


  • ...

    Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz.

    Tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:

    Tablo Başlığı

    (thead)


    Sütun Başlığ #1

    Sütun Başlığı #2

    Sütun Başlığı #3

    Sütun Başlığı #4

    Hücre

    hücre

    hücre

    hücre




    Hücre

    hücre

    hücre

    hücre




    hücre

    hücre




    Tablonun alt yazısı (caption)

    Şekil 2.8 Tablo yapısı

    Şimdi basit bir tablo yapmak için gerekli imleri öğrenelim. Öncelikle ...
    imlerini yazıyoruz ve arasını doldurmaya başlıyoruz.

    imi ile de sütunları oluşturuyoruz.

    Örnek :

    <table border="1">

    alt-yazı (caption)

    1.Sütun 2.Sütun 3.Sütun
    hücre4 hücre5hücre6
    hücre7 hücre8 hücre9

    Aşağıdaki şekilde örnek tablolar ve bunlara ait html kodlarını görüyorsunuz.





    Şekil 2.10 Örnek tablolar

    2.7 Çerçeveler


    Çerçeveler (frame), HTML'e sonradan eklenmiş bir özelliktir. Bu yüzden eski sürüm browser'lar çerçeve kullanılmış bir sayfayı görüntüleyemezler. (Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri destekliyor). Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir. Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir. Browser çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verecektir. Aşağıdaki örneği inceleyelim.

    Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde sayfa1.html dosyasını, diğerinde sayfa2.html dosyasını görüntülemesini bildiriyor.

    Şekil 2.11 Frame (çerçeve) yapısı



    imi ile sayfa1.html dosyasının artalan rengi yeşil (olive), sayfa2.html dosyasının artalanı ise mavi yapılmış, kolaylık olması açısından dosyaların adlarını görüntülemeleri için adları da çerçevelerin üzerine yazılmış ve sonuç gördüğünüz gibi.

    Şimdi bu çerçeveyi birlikte oluşturalım:

    frame.html dosyası:



    Çerçeveler (Frames)





    <SUP><SUP>1</SUP></SUP> <br /><body> </p> <p>1.Sayfa <br /></p> <br />2.Sayfa </font> <p>Anasayfa <br />Hakkımızda</p> <br />İletişim <br /><iframe src="index.html" name="yonlen" width="800" height="500"></iframe> <br /> <br /> <br /><FORM ACTION=' http://internet/form' METHOD=POST> <br /> <br /><input type="<b>checkbox</b>" name="kutu1" checked="on"> HTML <br /> <br /> <br /><input type="<b>checkbox</b>" name="kutu2"> PHP <br /> <br /> <br /><input type="<b>checkbox</b>" name="kutu3"> MySQL <br /> <br /></FORM> <br /> <br /><FORM ACTION=' http://internet/form' METHOD=POST> <br /> <br /><input type="<b>radio</b>" name="kutu" value="1"> HTML <br /> <br /> <br /><input type="<b>radio</b>" name="kutu" value="2"> PHP <br /> <br /> <br /><input type="<b>radio</b>" name="kutu" value="3"> MySQL</FORM> <br /> <br /><h2> Sanal Sınıf</h2> <br /> <br /><form action="http://pcsistem.net" method="post"> <br /> <p>Kullanıcı Adı:<input type="text" name="ad"></p> <br /> <p>E-posta Adresi:<input type="text" name="eposta"></p> <br /> <p>İletmek istediğiniz mesaj varsa aşağıdaki alanı kullanınız.</p> <br /> <br /><textarea name="mesaj" rows="10" cols="50" > <br /> <br /></textarea> <br /> <p>Almış olduğunuz dersleri işaretleyiniz</p> <br /> <br /> <br /><input name="ders" type="checkbox" value="programlama" checked="on"> <p>Pascal <br /></p> <br /><input name="ders" type="checkbox" value="isletim" > İletim Sistemi <br /> <br /><input name="ders" type="checkbox" value="HTML">HTML <br /> <br /> <br /><input type="submit" value="send"> <br /> <br /><input type="reset" value="reset"> <br /> <br /></form></input></input></input></input></input></input></input></input></input></input></input></input></input></body>







        Ana sayfa


    Temel Bilgisayar Teknolojileri Kullanımı

    Indir 356.23 Kb.