Bütün programlama dillerinin "hello world" diye isimlendirilen ilk programları vardır. Bu program hangi programlama dilinde olursa olsun ekrana "Hello Word" yazmanın dışında 2. birşey yapmaz. Gelin sizinle bir html dosyası yapalım ve ekrana sadece "Merhaba Dünya!" yazmasın.
Bunu windows işletim sisteminde yapacağız. Versiyon ne olursa olsun her windows işletim sisteminde notepad diye isimlendirilen txt uzantılı yazı dosyası oluşturma ve değiştirme programcığı vardır.
Size ben merhaba.html dosyasının içeriğini hazır verdim. Sizin yapacağınız bu hazır içeriği alıp dosyanın içine yapıştırıp kaydetmek ve oluşan html dosyasını tarayıcıda görmektir.
-
Windows Başlat tuşuna basınız.
-
notepad.exe yazıp enter tuşlayın.
-
Aşağıdaki çerçeve içine mouse ile tıklayın..
-
CTRL + (All) tuşlarına basın; HTML'nin tamamını seçtik
-
CTRL + (Copy) tuşlarına basın; Hafızaya aldık
-
Notepad programına geçin (ALT+Tab tuş kombinasyonu)
-
CTRL + V tuşlarına basın; buradaki HTML kod
notepad'a taşındı.
-
Şimdi bu dosyayı kaydedeceğiz.
merhaba.html dosyasını kaydedelim:
Yukarıdaki resimde görüldüğü gibi kayıt türünü *.*
yapın
Dosya adı ile soyadının arasına nokta koymayı
unutmayın.
Bir de karakter kodlama seçeneğini UTF-8 seçelim.
İsim verme ve karakter kodlama seçme adımlarından
sonra da "Merhaba Dünya" dosyamızı kaydedelim.
Tarayıcı ile de açıp görüntüye bi bakalım lütfen.
Size biraz ödev vereceğim. Ödevleri yaptığınızda bir html dosyasının temel etiketlerine göz ve aklınız aşinalık kazanacak. Bunun yanında IMG etiketini ve bazı özelliklerini deneyimleyeceksiniz.
Ödevler şunlar:
-
Vereceğim linkteki HTML kodlarına alıcı gözle bakıyorsun:
Sonra hepsini silip o HTML kodları sen yazıyorsun. Hadi Başla! Yapamadığında tarayıcının adres çubuğundayken enter yap sayfa tekrar baştan yüklensin. Silip yazamadığın kodlar tekrar gözüksün: Başarana kadar çalış!!!
-
Bu ikinci ödev ile img etiketini çalışacaksınız. Önceki ödevdeki gibi kodları silip tekrar yazın. Hadi gösterin hünerinizi. 2. Ödev Çalışması
-
Ayrıca burada resmin genişlik ve yükseklik özelliklerine şu değerleri verir misiniz:
250x300
150x100
Bu değerlerin her birini verdikten sonra RUN (çalıştır) yapın ve gözlemleyin.
-
Resim kodunda img etiketine title özelliğini ekleyin onada "Mont giymiş bayan" değerini verin. Bu yaptığınız resmin üzerine gelindiğinde açıklama çıkmasını sağlayacak.
Etikete birden fazla özellik belirtirken her birinin arasında boşluk olmalı. Zaten dikkat ettiyseniz özellik belirtirken eşittir (=) işareti yazıp değeri çift tırnak içinde belirtiyoruz.
0:0
Aile Tablosu HTML