• Anasayfa
• ÇATOM
• Ürünlerimiz
• Yeşiltepe ÇATOM
• Bölge Hakkında
• Öyküler
• Bilgisayar İşletmenliği
• Bilgisayarlı Muhasebe
• Web Tasarım
• Giyim Kursu
• Kuaförlük Kursu
• Anasınıfı

HTML dosyası uzantısı .HTM veya .HTML olan web tasarımı için kullanılan dosyadır. Derste, bu tip dosyalar hazırlanırken Başlat/Programlar/Donatılar/Not Defteri(=NotePad) programı kullanılacaktır.

2.1.1 Yeni Bir HTML Dosyası Hazırlamak

   1. Internet Explorer penceresini açın,

2. Adres çubuğuna about:blank yazıp Enter tuşuna basın.

   (Yeni boş bir dosya oluşturulmuştur.)

3. Bu sayfada farenin sağ tuşuna, boş bir zemini, tıklayın.
4. Çıkan menüden Wiew Source/Kaynağı Görüntüle komutunu verin.

   (Bir Not Defteri dosyası açılacaktır.)

5. Bu programı Dosya menüsünden Farklı Kaydet i tıklayın.
6. Dosya adı kendi soyadınız ve uzantısı .HTM  veya .HTML olacak biçimde  dosyanızı, masa üstünde html adlı bir klasör açıp bu klasörün içine kopyalayın. (Hazır).

HTML Kodları

HTML kodları(=deyimleri,komutları) <> şeklinde ifade edilen işaretlerin arasına yazılan HTML deyimleridir. Hemen hemen her kodun başlangıcı <> ve bitişi şeklindedir. Bu ibareler arasında kalan işlemler ilgili komut tarafından icra edilir. Bazı deyimlerin bir veya daha fazla parametresi vardır. Bu parametrelerin hepsi seçimliktir. Yani kullanma zorunluluğu yoktur. Fakat kullanıldığı takdirde deyime zenginlik katar. Ayrıca bu parametrelerin kullanılması için belli bir sıralama yoktur. HTML kodları yazılımında büyük harf küçük harf ayrımı da yoktur, örneğin = gibi. Aşağıda verilen örneklerin bir çoğunda büyük harf kullanılmıştır.

2.1.2 Giriş

Bütün HTML dosyaları kodu ile başlar   kodu ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun arasında kalmalıdır.

Web sayfası ile ilgili temel özellikler,Sayfa Başlığı, Yazı karakterler kümesi, link özellikleri gibi, burada tanımlanır.Kısaca head kısmında sayfanın nasıl görüntüleneceği gibi bölümler yer alır.Yeri geldikçe bu deyimin kullanımı gösterilecektir.

arasında yazılan metni pencere başlığı olarak kabul eder. Bu deyimler deyimleri arasına yeralır.

Web sayfasında yer alacak asıl bilgiler HTML formatındaki dosyanın deyimi belirlenen kısma yazılır. İşlem deyimi ile biter. Bu iki deyim arasında herhangi bir metin web sayfasında ekranda aynen görülür.

Dosyanın içinde bir açıklama yapmak için kullanılır. Açıklama ... ile belirlenen kısma yazılır.

Örnek 1: Aşağıdaki örneği bir not defterine yazın ve dosya uzantısını htm veya html  olarak belirleyin.

Bir metin yazılırken bir alt satıra geçmek için kullanılır. Bu deyim kullanılmazsa Tüm işlemler aynı satırdaymış gibi işlem görür. Yani
deyimi Enter tuşunun görevini görür.

Bir veya daha fazla satırı sayfa içinde ortalamak için kullanılır.

Örnek 2:

Bu deyim Web sayfasında yazılacak olan metnin puntosunda değişiklik yapmak için kullanılır. ? İşareti yerine 1-5 arası bir rakam gelir. Örneğin,

büyük puntolu yazı yazmak için kullanılır.Sayı değeri büyüdükçe punto küçülür.

deyimlerini kullanmak yerine bu deyim kullanılabilir.

Parametreler:

SIZE  : Sayfada bulunan bir yazının punto ayarı burada yapılır. Örneğin sayı yerine +4 yazılırsa

                  FONT deyiminin arasına yazılmış olan metnin boyutu +4 birim daha büyük görülecektir, -2

                  yazılırsa  metin -2 birim daha küçük görülecektir.

COLOR : Yazının rengi burada belirlenir. Red,Blue... gibi

FACE  : Yazı tipi ayarlamalarını burada yapılır. Arial, Tahoma... gibi

Örnek 3:

Bu iki deyim arasına yazılan metni koyu (=Bolt) olarak sayfada gösterilmesini sağlar.

Bu iki deyim arasına yazılan metni altıçizili (=Underline) olarak sayfada gösterilmesini sağlar.

Bu iki deyim arasına yazılan metni italik (=Italic) olarak sayfada gösterilmesini sağlar.

Bu iki deyim arasına yazılan metin üstindis olarak işlem görür.

Bu iki deyim arasına yazılan metin altindis olarak işlem görür.

Örnek 4:

2.1.3 Paragraf Biçimlendirme

Web sayfasında yazılan kelimelerin arasında yalnız bir boşluk vardır. Ayrıca bir alt satıra geçerken
deyiminin kullanılması gerektiği daha önce bahsedilmişti. Web sayfasında yazdığınız metnin NodPad e yazdığınız formatta görünmesi için bu deyim kullanılır.

Örnek 5:

                                   
 
        Seyhan
 
             SİNCAR    
 

Eğer uzun bir metin birden fazla paragrafla belirlenmek istenirse paragrafın başına ve sonuna bu deyimler yazılır.

Parametreler:

ALIGN : Paragrafın tipini belirler.Örneğin

                  sağa dayalı yazılır.

       paragraf ortalanarak sayfada görüntülenir.

Örnek 6:

2.1.4 Sayfanın Artalanını Belirleme

Bu işlem deyiminin parametreleri kullanılarak yapılır. Daha önce    deyimini kullanırken bu parametrelerden bahsedilmemişti.

i) Artalan Rengini Belirleme

Renk kısmına sayfanın istenilen artalan rengi yazılır. Bu renkler ingilizce renk isimleri olmalıdır.

Örneğin: Blue, Black, Green, Yellow, Red, Gray, Cyan... gibi.

Yukarıdaki kısımda kullanacağınız renk sayısı sınırlıdır. Dolayısıyla Aradığınız renk tonu yukarıdaki özellikte bulamayabilirsiniz. doğada bulunan üç ana renk kırmızı,yeşil,mavi dir. Tüm renkler bu renklerin karışımından elde edilebilir. #kkyymm ifadesini kullanarak bir k-y-m renklerinden bir karışım elde edebilirsiniz. Burada kk,yy,mm ifadeleri birer rakama karşılık gelmektedir. Örneğin #990000 tam olarak kırmızı renge karşılıktır. Renk tonu ayarları bu rakamlar aracılığı ile yapılır. Bazen bir renk tamamen kullanılacaksa, yani ilgili pozisyona 9 konacaksa, F(=Full) kullanılabilir. Örneğin;

#FF15FF = #991599, #0F5FFF = #095999 gibi.(yaklaşık olarak!)

Örnek 7:

ii) Artalana Resim Ekleme

Artalanı belli bir renkte boyamak yerine, artalana konumu bilinen bir resim dosyası eklenebilir. Bu dosyaların uzantıları .GIF,.JPG,.JPEG veya .BMP olmalıdır.

Örnek 8:

2.1.5 Sayfaya Yatay Çizgi Ekleme

Web sayfasına belli bir uzunlukta,renkte ve boyutta yatay bir çizgi çizmek için kullanılır.

Parametreler:

WIDTH   : Sayfada bulunan yatay çizginin uzunluğunu piksel veya % olarak burada belirlenir.

                        Piksel  ekrandaki nokta sayısı ile ilgilidir. % ise ekrandaki bir satırı kaplama oranıdır.

                        Örneğin 80% bir satırın %80 ni kaplayacak şekilde bir yatay çizgiyi işaret eder.

SIZE    : Çizginin kalınlığı burada ayarlanır. 1-5 arası değerler kullanılır.

COLOR   : Yatay çizginin rengi burada belirlenir.

NOSHADE : Yukarıdaki 3 durumda da çizginin bir gölgesi vardır. Bu parametre kullanılırsa yatay

                         çizginin gölgesi ortadan kalkar.

Örnek 9:

2.1.6 Sayfaya Resim Ekleme

<>

     ALT=�açıklama� BORDER=�sınır�>

Web sayfası içinde resim dosyası yerleştirmek için bu deyim kullanılır.

Parametreler:

SCR    : file:// dan sonra sayfaya eklenecek olan resim dosyasının konumu yazılır.

WIDTH  :  Sayfaya eklenmiş olan resmin eninin ebatları piksel veya % olarak burada belirlenir.

HEIGHT : Sayfaya eklenmiş olan resmin boyunun ebatları piksel veya % olarak burada belirlenir.

ALT    : Sayfaya eklenmiş olan resmin fare ile üzerine gelindiğinde, açıklama amaçlı bir yazı

                      göstermek  için kullanılır.

BORDER : Sayfaya eklenmiş olan resme kenarlık vermek için kullanılır. Sınır (0-6) arası.

Örnek 10:

2.1.7 Sayfaya Madde işaretleri(=İmleri) Ekleme

,
ve

1. Web sayfası dahilinde liste hazırlarken bu deyimler listeleme özelliğini başlatmaktadır. Eğer listede bulunan maddelerin başına büyükçe bir noktanın konulması isteniyorsa

   deyimi kullanılmalıdır. Listedeki maddeleri numaralı sıralamak için
   değimi kullanılır. Madde olarak kullanılacak her satır
   1. 
      
   deyimi ile başlayıp deyimi ile bitmelidir.

    

    

   Bir listede bulunan maddelerin başına büyükçe bir nokta,küçük bir çember veya içi dolu bir kare işareti koymak için kullanılır.

    

   Parametreler:

   TYPE : Listedeki maddelerin başına konacak olan işaret tipi burada belirlenir. Notka için DISC, içi 

                   boş bir nokta için CIRCLE ve kare işareti için SQUARE deyimleri kullanılır.Bir şey 

                   belirtilmezse varsayılan değer noktadır.

      

   Örnek 11:

    

   TÜRKİYE 1.FUTBOL LIGINDEDE ŞAMPİYON OLAN TAKIMLAR              Galatasaray SK 14 kez         Fenerbahçe SK 13 kez          Beşiktaş JK 9 kez             Trabzonspor SK 6 kez

    

   Bir listedeki maddeleri numaralı olarak sıralamak için kullanılır.

    

   Parametreler:

   TYPE  : Listedeki maddelerin sıralanma tipleri burada belirlenir. Örneğin

                     kullanılırsa maddeler a,b,c.. şeklinde sıralanır. TYPE belirtilmezse varsayılan değer 1,2,3...

   START : Sıralamaya kaçıncı  maddeden başlanacağı burada belirlenir.

    

   Örnek 12:

    

    

   TÜRKİYE 1.FUTBOL LIGINDEDE ŞAMPİYON OLAN TAKIMLAR              Galatasaray SK 14 kez          Fenerbahçe SK 13 kez          Beşiktaş JK 9 kez             Trabzonspor SK 6 kez

    

   2.1.8 Sayfaya Tablo Ekleme

    

   , ve deyimleri ile birlikte kullanılmalıdır. satır ,

   Tablonun satırlarında yapılacak olan işlemlerde bu deyim kullanılır. Her satır için farklı işlem yürütülebilir.

    

   Tablo hücrelerini düzenlemek için kullanılır.

   deyimleri arasına yazılmalıdır.

    

   Parametreler:

   ALIGN   : Tablo içine yazılan metnin biçimi belirlenir. Sağa dayalı, ortalı gibi.

   BGCOLOR : Tablo hücrelerinin artalan rengi burada belirlenir.

    

    

   Örnek 13:

    

   Bu deyim sayesinde web sayfalarında tablolar hazırlanabilir. Bu deyim	ve
   tablonun satırlarının içindeki işlemler için kullanılır.   deyimleri tablonun başlangıcını ve bitişini gösterir. Unutmayın! bütün parametreleri kullanmak zorunda değilsiniz.   Parametreler: BORDER : Tabloyu oluşturan çerçevenin kalınlığı burada belirlenir.sınır ifadesi 1-5 arası bir sayıya                      karşılık gelir. WIDTH  : Tüm tablonun ister piksel ister % olarak genişliği. HEIGHT : Tüm tablonun ister piksel ister % olarak yüksekliği.

   Adı soyadı   Numarası     Notu Rakide KAÇAR 2009        75          Hamdiye AYDIN 2054        96

    

    

    

    

    

   Örnek 14:

    

   Web Sayfamıza Hoş Geldiniz..

    

    

   2.1.9 Sayfalara e-mail Adresi Ekleme

    

   Web sayfasında e-posta (=elektronik posta) adresi eklemek için ve HREF deyimlerini kullanmak gerekir.

    

    

   Örnek 15:

    

   E-Mail

    

   2.1.10 Başka Web Sitelerine Geçiş

    

   Bir kişi veya kurumun web sitesine hazırladığınız web sayfasından bağlantı kurmak için yine ve HREF deyimleri kullanılır.

    

   Örnek 16:

    

   Sincar Bilişim Teknoloji Yeşiltepe ÇATOM tıklayın

    

   2.1.11 Başka HTML/Text dosyalarına Bağlantı Kurma

   Daha evvelden hazırlamış olduğunuz HTML dosyalarına bağlantı kurmak için yine ve HREF deyimleri kullanılır. Bağlantı kurulacak dosyanın uzantısı txt, htm veya html olabilir. Bunun için;

    

   file:// ile belirtilen yerden sonra bağlantı kurmak istediğiniz dosyanın konumu yazılır.

    

   Örnek 17:  Bu örnekten önce masaüstüne Dosya1.html ve Dosya2.txt adlı dosyaları oluşturun.

    

   Dosya1 Dosya2 15. Örnek

    

   2.1.12 Bağlantı (Link) Özelliklerini Ayarlama

    

   i) Link Renklerinin Ayarları

    

   Yukarıdaki iki örnekte Web sayfanızda linklerin renkleri altı çizili ve mavi renktedir. Bir siteyi ziyaret ettiğinizde IE ziyaret edilen bu sitenin link rengini eflatun renginde gösterir. Kendi sayfanızda bulunan linkleri rengini ayarlayabilirsiniz. Bunun için deyiminin aşağıda verilen özelliklerini inceleyin.

    

    

    

    

   Parametreler:

    

   LINK  : Sayfada bulunan linklerin ayarlamaları burada yapılır.

   ALINK : Fare ile link tıklandığında link in alacağı renk burada belirlenir.

   VLINK :  Eğer bir link daha önce ziyaret edilmişse, o sitenin ziyaret edildiğini gösteren renk ayarı

                      burada yapılır.

    

   Örnek 18:

    

   ODTU Microsoft E-Mail

    

    

   ii) Linklerin Altı Çizili Özelliğini Kaldıra

    

   Sayfanızda bulunan linklerin altı çizili özelliğini kaldırma işlemi deyimleri arasına aşağıda verilen kodları yazmalısınız. Ayrıca bu deyimlerle altı çizili özelliği fare linkin üzerine geldiğinde, link altı çizili, üstü çizili veya altı-üstü çizili duruma getirilebilir.

    

    

   Parametreler:

   link            : Sayfada bulunan bir link renk ve durumu

   active          : Link tıklandığında alacağı renk ve durum

   visited         : Ziyaret edilmiş bir linkin alacağı renk ve durum

   hover           : Fare ile linkin üzerine gelindiğinde özelliklerinin işleme konulması. Örneğin

                                             fare linkin üzerine geldiğinde altı çizili olması isteniyorsa hover kısmında

                                            underline seçilmelidir. Üstü çizili olması için overline seçilmelidir. Hem

                                            altı hem üstü çizili  olması için iki tane hover kullanılmalıdır.

   color           : Linklerin, ziyaret edilen linklerin.. renk özelliğinin ayarlanması burada

                                             yapılır.

   text-decoration : Bu kısımda linkin tipi belirlenir. Fare linkin üzerine geldiğinde, linkin

                                             alacağı durum burada ayarlanır. none seçilirse ilgili linkin altı çizili özelliği

                                         ortadan kalkar. underline seçilirse ilgili linkin altı çizili özelliği devam

                                             eder.

    

   Örnek 19:

    

   Sincar Bilişim Teknoloji

    

   ii) Aynı Sayfa İçinde Bağlantı Kurma

   Web sayfalarında birbirine bağlı konular aynı sayfa içinde yer alabilir. Bu konular başka sayfalara geçmeden aynı sayfa içinde birbirleri için link oluşturulabilir. Bunun için yine deyimi kullanılır. Çok uzun metinlerde kullanılması kolaylık sağlar.

    

   Aynı sayfa içinde link yapılırken link burada bir adres veya dosya değildir. Sadece fare ile link e tıklandığında aynı sayfa içinde, link bizi başka bir yere yönlendirecektir(=gönderecektir). Bu işlem sayfa içinde gidilecek olan yere bir isim vermekle yapılır.

    

   Link e tıklandığında sayfada gidilecek yer burasıdır. Dikkat linkdeki isimle gideceği yer ismi aynı olmalıdır. Aksi takdirde bağlantı kurulamaz.

    

   Örnek 20:

    

   İÇİNDEKİLER     Bolum1   Bolum2   Bolum3 Burası Bolum1 Başa Dön Burası Bolum2 Başa Dön Burası Bolum3

    

   2.1.13 Sayfaya Çerçeve(Frame) Özelliği Kazandırma

    

   Web sayfalarının bir çoğu ikiye bazen üçe bölünmüş olarak görülür. FRAMESET deyimi aynı IE penceresinde birden fazla IE penceresi ile çalışma imkanı verir. Bu şekilde daha aktif bir Web sayfası hazırlanabilir. Ana sayfanızı 2 veya 3 e bölmek için BODY deyimi yerine FRAMESET deyimi kullanılmalıdır.

    

   Aynı pencerede birden çok sayfayı kontrol etmek için kullanılır. FRAMESET deyimi kullandığınızda BODY deyimi kullanılmaz.

    

   Parametreler:

   ROWS   : Web sayfasını yatay olarak bölmek için kullanılır. ROWS=�100,*� seçilirse yukarıdan

                       itibaren 100 piksel ayrılır ve yatay bir çizgi ile sayfa ikiye bölünür.

   COLS   : Web sayfasını dikey olarak bölmek için kullanılır.

   BORDER : Sayfa bölündüğünde ortaya çıkan çizginin kalınlığı burada ayarlanır. ? yerine 0-5 arası bir

                        rakam gelir.

    

   deyimleri arasında belirlenen çerçevelerin formatları bu deyimle yapılır.

    

   Parametreler:

   SRC       : Ana sayfa açıldığında daha önce belirlenmiş yere bağlantı kurulacak olan dosyanın

                              adı.

   NAME      : İlgili çerçevenin ismi.

   SCROLLING : Ana sayfa açıldığında sayfalar pencereye sığması veya sığmaması ayarı burada

                               yapılır.

   NORESIZE  : Ana sayfadaki diğer sayfaları bölen pencereleri ayıran çizginin üstüne gelindiğinde

                             bu  çizginin fare ile ebatlarının değiştirildiği görülür. Kullanıcıya bu izni vermek

                               istemiyorsanız bu deyimi de eklemelisiniz.

    

    

   Örnek 21: Bu örnekten önce masaüstüne sayfa1.html, sayfa2.html ve sayfa3.html adlı

                   dosyaları oluşturun. Bu örneği de masaüstüne index.html olarak kaydedin. Yada bu üç

                   dosya aynı klasöre kaydedin.

    

    

   Örnek 22 : Bir sayfanın 3 e bölünmesi

    

    

   Bir Çerçeveden Diğerine Bağlantı

    

   Bir çok web sayfasında sol çerçevede bulunan bir linkin etkisini sağ tarafta görülür. Bu özelliği kazandırmak için ve HREF in yanında TARGET parametresi de kullanılmalıdır.

    

   Parametreler:

   TARGET : Bağlantı etkisinin görüleceği çerçevenin ismi burada yazılır. TARGET kullanılmazsa link

                       aynı pencerede açılacaktır. Fakat Hedef_Çerçeve yerine mevcut çerçeve isimlerinden

                       başka bir  isim yazılırsa link, için başka bir IE penceresi açılır.

    

   Örnek 23: Burada sayfa1.html, sayfa2.html,sayfa3.html ve index.html dosyalarının  içerikleri de belirlenmiştir. Bu 4 dosyayı aynı klasörün içine kopyalayın. Böylece link  yapılırken  dos-

   ya  yollarını belirtmek zorunda kalmayacaksınız.

    

    

   SAYFA1 SİNCAR Sayfa3 Yeşiltepe ÇATOM

    

   SAYFA2 Sayfa3

    

   SAYFA3 Sayfa2

    

ANKET

Tüm Anketler