BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 

HTML'YE GİRİŞ 
HTML açılımı HyperText Markup Language olan,kullanıcılarına browserlar tarafından gorüntülenebilen web sayfalaları tasarlama imkanını sunan bir programlama dilidir(Belki metin biçimlendirme dili desek daha uygun olur).Fakat C/C++,Basic,Java gibi yüksek dereceli programlama dillerine kıyasla ögrenmesi çok kolaydır,tabi yapabilecekleri de bir o kadar kısıtlıdır.Tabi bu 'kısıtlı' lafına aldanmayin,iyi bir HTML temeli uzerine biraz JavaScript ve CSS (ve tabi yaratıcılığınızı) ekleyerek,internette görup de kıskandiginiz birçok sayfayı yapabilecek hale gelebilirsiniz! Amacımız HTML oğrenmek olduğuna göre,HTML'i bir tanıyalım İlk olarak HTML ile yapılan web sayfalarının calışma mantıgına bir bakalım, sonra da HTML ile ne yapıp ne yapamayacagımızı öğrenelim:

HTML'in ÇALIŞMA MANTIĞI
HTML dilinde yazdiginiz kodları ücret karşılığı veya bedava hizmet veren servis sağlayıcınızın sunucusuna(server) yüklersiniz(upload); Bu sunucu sizin web sayfanızı internette yayınlar; Sitenize gelen ziyaretçilerin browserları bu kodları yorumlar ,böylece ziyaretçiler sayfayi görüntülemiş olur. Kendi yazdığınız kodları kendi browserınızla açarak da sayfanızın nasıl goründüğünü test edebilirsiniz. Bu mantığı konular ilerleyince daha iyi kavrayacaksınız..

HTML İLE NE YAPILABİLİR,NE YAPILAMAZ
HTML ile bir web sayfasında

Yapılabilecekler:
Metin Biçimlendirme(Renk,font,vs),listeler,bağlantılar(link),resim kullanımı,tablolar,Çerçeveler,Formlar

Yapılamayacaklar:
Etkileşimli,olaylara duyarlı sayfalar;formları işleyip degerlendiren programlar.

Yapılamayacaklardan ilkini Javascript,ikincisini CGI ,ASP, veya PHP kullanarak yapabilirsiniz. Bununla birlikte bir web sayfasının temelini her zaman HTML kodları oluşturur, Yani web tasarımı konusunda ilerlemek istiyorsanız,HTML bilginizin sağlam olması gereklidir!

NE GEREKİR?

Bir web sayfası yapmak için ne gerekir?Bu noktada iki seçeneğiniz var.Eğer web sayfanızı hiçbir kod kullanmadan yazmak istiyorsanız,Homepage veya Dreamweaver gibi,sizi bu işten kurtaracak yazılımlar kullanabilirsiniz.Kendi içlerinde başarılı sayılabilecek bu yazılımların dezavantajı ise,yapabileceklerinizin programın size sunduklarıyla sınırlı olmasıdır.Veya oturup kendiniz kod yazmak/üretmek isteyebilirsiniz.Zaten bu siteye geldiğiniz için ikinci gruba girdiğinizi varsayıyoruz,yani bu işi geçekten öğrenmek istiyorsunuz... O zaman iyi haber şu: İhtiyacınız olan şey sadece bir düzyazı programı,mesala (Windows için)Notepad .Tabi yazdıklarınızı test etmek için bir browser da fena olmaz,ama onu zaten her yerde bulabilirsiniz.
Opsiyonel olarak kod yazma işini kolaylaştıran, size zaman kazandıran text tabanlı bazı yazılımlar kullanabilirsiniz,mesela 'allaire Homesite'.Bu tip programlar sadece kod yazma işlemini kolaylaştırır,ancak yazma işlemini yine siz yaparsınız,dolayısıyla yapabileceklerinizi sınırlayan tek şey bilginizdir.Yine de işlerin nasıl yürüdüğünü öğrenmek için önce Notepad ile başlamanız faydalı olacaktır.
Notepad kullanırken, konulara ilişkin verilen örnekleri ve/veya kendi yazdığınız kodları '.htm' veya '.html' uzantılı kaydedin.Aksi takdirde browser'ınız bu dosyaları görüntülemez.Homesite yazdıklarınızı zaten standart olarak bu uzantılarla kaydeder.
Üzücü bir durum,iki yaygın browser olan 'Microsoft Internet Explorer' ve 'Netscape Navigator''ün html kodlarını yorumlamada farklılık göstermesidir.Piyasanın bu iki browser arasında neredeyse eşit olarak bölünmüş olmasından dolayı,yazdığınız kodları her iki browser'ın da aynı/benzer şekilde yorumlayacağı şekilde yazmaya özen göstermelisiniz.Sayfayı tasarlarken belli aralıklarla Explorer ve Netscape ile görüntüleyip sonucu karşılaştırmak,bu sorunu çözmek için iyi bir yöntemdir.
Son olarak;Browser'ınızın 4. veya daha ileriki bir sürüm olması tavsiye edilir,çünkü eski sürüm browser'lar bazı özellikleri desteklememektedir.


TEMEL KAVRAMLAR


HTML'i kısaca tanıdık ve gerekli araçları öğrendik,artık gerçekten HTML öğrenmeye başlayalım...

BAZI TEMEL KAVRAMLAR


  • Tag(Etiket): HTML belgelerine bir şey yerleştirmek ve/veya bir biçim belirtmek için 'Etiket' denen ifadeler kullanırız.Etiketler '<Etiketin Adı>' şeklinde yazılırlar.Bazı istisnalar hariç açılan etiketlerin yeri gelince kapatılması gerekir; bu da '</Etiketin adı>' ifadesiyle yapılır.
    <center> : Metnin ortalanmasını sağlar ;   <textarea> : Metin alanı oluşturur.
  • Parameter(Parametre): Parametreler etiketlerin değiştirilebilen özelliklerinin isimleridir.
    <textarea rows="50">
    Burada 'rows' ifadesi metin alanının yükseklik özelliğinin adıdır,bu özelliğin değeri değiştirilebilir.
  • Value(Değer): Parametre tanımından da kolayca anlayabileceğiniz gibi,parametreler ile değiştirdiğimiz sayılara(veya bazen keywordlere)değer adı verilir.
    <textarea rows="50">
    Burada '50' ifadesi metin alanının yüksekliğinin değeridir.

    NOT:Kursun devamında parantez içinde verilen Türkçe terimler kullanılacaktır.Fakat bu terimlerin orjinallerini de aklınızın bir kenarında tutun.


    TEMEL ETİKETLER

    <html>...</html>   Bu etiket browser'a HTML belgesinin basladığı ve bittiği yeri bildirir.Bütun HTML kodları bu etiketin içinde yeralmadır.  
    <head>...</head>HTML belgesinin ilk bölümüdür.Title bölümü ile ileride göreceğimiz CSS ve JavaScript kodları buraya yazılır.Bu bölume yazılanlar metin olarak ekranda görünmez. 
    <title>...</title>Head bölümü içine yazılan Title bölümüne sayfanın başlığı yazılır,bu başlık browser'ın sol üst bölümünde görüntülenir.
    <body>...</body>HTML belgesinin bütün içeriği burada yeralır.Buraya metinler,resimler,listeler... vb. her türlü HTML nesnesi yerleştirilebilir.

    Diğer üç etiketin aksine body etiketinin parametreleri bulunur.

  • İLK SAYFAM VE HTML BELGESİNİN YAPISI


    İLK SAYFAM
    İlk web sayfamızı yapacak kadar HTML öğrendik bile! İşte adet olduduğu üzere Merhaba dünya...

    <html>
    <head>
    <title>Merhaba!</title><br><METAcontent=text/html;CHARSET=windows-1254 http-equiv=Content-Type>
    </head>
    <body>
    Merhaba Dünya!
    </body>
    </html>
    Yukarıda görgüğünüz kodu düzyazı programınızda yazıp merhaba.htm adıyla kaydedip çalıştırırsanız ilk HTML sayfanızı yapmış olursunuz. Burada 4. satırda gördüğünüz meta etiketi,sayfanızda Türkçe karakterlerin görüntülenmesini sağlar.Diğerlerini zaten biliyorsunuz...Bu kodlarlada kendinize bir index hazırlayabilirsiniz hemen hemen aynı mantık kullanılıyor,tabi farklı şeylerde ekleyebilirsiniz bunun için html kodlama bilginizin yüksek olmasında fayda var.


    HTML BELGELERİNİN GENEL YAPISI
    HTML belgeleri,ilk sayfamızdan da anlaşılabileceği gibi aşağıdaki şablon üzerine yazılır:

    <html>
    <head>
     <title>Başlık</title>
     </head>
    <body>
     ...
    </body>
    </html>
    Eğer isterseniz bu şablonu istediğiniz bir adla .txt uzantılı olarak kaydedip, bundan sonra yazacağınız örnekleri kaydettiğiniz bu dosyanın uzerine yazabilirsiniz; böylelikle her seferinde fazladan birkaç kod yazmaktan kurtulmuş olursunuz.Eğer sitenizde Türkçe karakter kullanacaksanız lütfen bu şablonun head bölümüne, 'Merhaba Dünya' örneğinin kodlarında 4. satırda yer alan
    <meta content=text/html;CHARSET=windows-1254 http-equiv=Content-Type>< /td>

    satırını da ekleyin...


    METİN BİÇİMLENDİRME ETİKETLERİ

    HTML'in temel unsurlarını öğrendikten sonra,artık işin inceliklerine geçebiliriz. İlk olarak yazdığımız metinleri şekillendirmeyi öğreneceğiz.Aşağıdaki tablodaki etiketler,size bu konuda geniş olanaklar sağlayacak. Önce Başlık etiketleri:

    BAŞLIK ETİKETLERİ
    <h1>...</h1>         

    Başlık

    <h2>...</h2>

    Başlık

    <h3>...</h3>

    Başlık

    <h4>...</h4>

    Başlık

    <h5>...</h5>
    Başlık
    <h6>...</h6>
    Başlık


    VE DİĞERLERİ...
    <b>...</b>    Yazılarınızı 'bold' yapar.        Örnek Yazı
    <i>...</i>Yazınızı italik karakterlerle yazarÖrnek Yazı
    <u>...</u>Altı çizgili yazarÖrnek Yazı
    <p>...</p>Paragraf etiketi,paragrafınızın altına ve üstüne boşluk koyar ...Paragraf
    ...
    <br>satırbaşı yapar,bu etiketi kapatımak gerekmez...
    Satırbaşı
    Şimdi bir örnek ile öğrendiklerimizi uygulayalım:
    <html>< br><head><br><title>MetinBiçimlendirmeörneği</title><br><metacontent=text/html;CHARSET=windows-1254 http-equiv=Content-Type>
    </head>
    <body>

    HTML size metin biçimlendirme konusunda geniş olanaklar sağlar; Metinlerinizi ister <h1>kocaman</h1>,
    ister <h6>küçücük</h6>,isterseniz <b>koyu</b>,<u>altyazılı</u>,veya <i>eğik</i> yazabilirsiniz.
    Yada satırbaşı yapabilir,<br>Veya<p>Paragraf oluşturabilirsiniz</p>

    </body>
    </head>
    </html>
    Metin biçimlendirmek için yukarıda gördüğümüz etiketlerin dışında <font>...</font> etiketi de kullanılır.

    <FONT> ETİKETİ


    Font etiketi sahip olduğu parametreler sayesinde metinlerin renk,yazı tipi, boyut gibi özelliklerini değiştirmemize olanak sağlar.Bu etikete geçmeden önce HTML'de renklerden kısaca bahsetmek yerinde olur. 
    RENKLER
    HTML'de renkler hexdecimal formunda ifade edilir.Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur ve Bu düzende 9'dan sonraki say1ıarı göstermek için 'A'dan 'F'ye kadar olan harfler kullanılır. Bununla birlikte HTML bazı renklerin ingilizce isimlerini anlar; aşağıdaki örnekte bu renkleri görmektesiniz.
    AQUABLACKBLUEFUCHSIAGRAYGREENLIME
    MAROONNAVYOLIVEPURPLEREDSILVERWHITEYELLOW
    Burada görülen renkler hexdecimal cinsinden de ifade edilebilir: Örneğin #FFFFFF beyaz ,#000000 siyah ,#C0C0C0 gri(tabloda 'silver') renklerini verir.


    <FONT> ETİKETİ VE PARAMETRELERİ
    Renkleri kısaca tanıdıktan sonra artık asıl konumuza geçebiliriz.HTML belgesinin body bölümüne yazdığımız metni <font></font> etiketleri arasına alarak bu metne etiketin aşağıdada listelenen parametreleri doğrultusunda bazı özellikler kazandırabiliriz:
    color      hexdecimal veya 'rengin ingilizce ismi' değerini al1ır      #000000,black  
    face      Yaz1. türünün ismi değerini al1ır      Times new roman,Arial
    size      1 ile 7 arasında istenilen değeri alır      +1,+5
    Şimdi bu parametreleri bir örnekte kullanalım:
    <html>
    <head>< BR>  <title>Fontkullan1.m1.</title><BR> <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type></head>
    <body>
    Font etiketinin color parametresini kullanarak <font color="#FF0000">renkli</font>
    <font color="Blue">yaz1ılar</font> <font color="#00FF00">yazabilir</font>;<p>
    değişik yazı karakterleri kullanabilirsiniz:<font face="Verdana">Mesela böyle!</font><p>
    Hatta yazılarınızı <font size="+6"> büyütüp</font><font size="-1"> Küçültebilirsiniz</font>
    </body>
    </html>
    Font etiketinin face parametresinin yazı tipi belirttiğini biliyoruz.Bu parametre ile belirlediğiniz yazı tipi,ancak ziyaretçinin bilgisayarında da yüklü olması halinde görüntülenebilir. Bu nedenle bu parametreye birkaç değer atamak,son değer olarak da windows'un standart font'lar1ından birini atamak, sayfalarınızın hiç istemediğiniz bir font'la görüntülenmesini büyük ölçüde engeller.


    <font face="impact,verdana,arial">...</font>
    Bu kod browser'a önce impact, yoksa verdana, o da yoksa arial fontunu kullanmasını bildirir.


    Bizi Takip Edin
    Pinterest Facebook Twitter
     © by bilgicafem61
    Aşağıda Yorum ve Sorularınızı Bırakın.



    Yorum Gönder Blogger

     
    Top