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!

 

HTML5 ile Gelen Yenilikler

Bu dersimizle HTML5''e başlıyoruz. Öncelikle <!DOCTYPE> etiketinden söz etmek istiyorum. .<!DOCTYPE> bir web sayfasını tarayıcıya tanıtır ve sayfanın düzgün görüntülenmesini sağlar. Kullanımı şart olmasa da, tarayıcının kodları daha sağlıklı yorumlamasını sağlayıp, hata riskini azaltır. Bu etiketi sayfanın en başına yazarız ve kapatmayız. Her HTML sürümü için farklı bir <!DOCTYPE> tanımı vardır. Ben sadece HTML 1.0 ve HTML5'teki kullanımlarını göstereceğim. Amacım HTML5 ile gelen gelişimi göstermek... Diğer sürümlere dair bilgileri Internet'te bulabilirsiniz.
- HTML 1.0 için:
<!DOCTYPE HTML
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
- HTML5 için:
<!DOCTYPE HTML>

Gördüğünüz gibi DOCTYPE etiketimiz, HTML5'te gayet sade bir hâl almış. <!DOCTYPE> etiketiyle tarayıcıya "Ben HTML5 kullanıyorum. Sayfayı ona göre yorumla." demiş oluyoruz.
İlk dersimizde de söylediğimiz gibi HTML5, HTML'in son sürümüdür; yani en güncel hâlidir. HTML5 içinde biraz CSS ve Javascript barındırır ve diğer HTML sürümlerine göre daha esnektir. Bu sürüme özgü bazı yeni kodlar gelirken, eskiden kullandığımız bazı kodlar da artık kullanılmayacaktır. HTML5'te kullanılmayacak kodları sıralarsak:
<acronym> , <applet>,  <basefont>, <big>, <center>, <dir>, <font>,  
<frame> <frameset>, <noframes>,  <strike>, <tt>, <u>,  <xmp>
Bu kodların artık kullanılmamasının sebebi olarak, CSS ile de bu kodlarla yapılabileceklerin yapılması, HTML’de bunlara duyulan ihtiyacın azalmasını söyleyebiliriz. HTML5 ile gelen yeni etiketler ise  açıklamalarıyla beraber şöyle sıralayabiliriz:
<canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript  ile yapılabilir.
<audio>: Sayfaya ses oynatıcı bir modül ekler.
<video>: Video oynatıcı bir modül  ekler.
<progress>: İşlem süreci göstergesi ekler.
<caption>: Başlık olarak düşünülen metinleri düzenler.
<header>: Sitenin başlık  ve açıklama içeriğini alır.
<nav>: Menüleri ve bir takım zaruri işlevleri içine alır.
<footer>: Sitelerin en alt  kısmını içine alır.
<article>: Makale, deneme tarzı yazıları kapsar.
<aside>: Ana içerikte ayrı yazılan kısımdır.
<datalist>: Düzenlenebilir elementlere otomatik tamamlama özelliği  verilmesini sağlar.
<details>: Detay bilgisi  içerir.
<embed>: Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
<figcaption>: <figure> elementinin başlığını belirler.
<figure>: Çeşitli medya içeriği gruplarını belirler.
<hgroup>: Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.
<mark>: Yazı içerisinde özellikle üstünde durulan kelimeleri  belirler.
<summary>: Yazının başlığını belirler.
<time>: Tarih, saat verilerini kapsar.
Bunların dışında <command>,<meter>,<output>,<rp>,<source>,<ruby>,<section>, <rt> ve <keygen> de HTML5 ile gelen yeni etiketler arasındadır. Şimdi ilk olarak <canvas> etiketiyle bir örnek yapalım.
<!DOCTYPE HTML>
 <html>
  <body>
   <canvas width="200" height="100"style="border:1px solid black;">
    <script type=”text/javascript”>
     ...
    </script>
   </canvas>
  </body>
 </html>
Tarayıcıdaki görüntüsü sayfanın sol üstünde siyah kenarlıklı içi boş bir tablodur. İçi javascriptle çizim yapılması için ayrılan alandır. Javascript’e şimdi girmiyorum. Ancak yazdığım kodları açıklayayım. Width ve height ile oluşturduğumuz alanın enini ve boyunu pixel cinsinden belirlemiş olduk. Style, kenarlık özelliklerini belirlemek için açıldı. ”border:1px “ ifadesi kenarlık kalınlığını belirler. Solid kenarlığın düz çizgi olmasını sağladı. Solid yerine dashed i kullansaydık kenarlık kesik çizgi halinde olacaktı. Son olarak black ise kenarlık rengi. Onu da red yellow şeklinde değiştirmek mümkün veya #000000 şeklinde renk kodunu yazabiliriz.
Şimdi de sırasıyla <audio> ve <video> etiketlerinden bahsedelim.
<!DOCTYPE HTML>
 <html>
  <body>
   <audio src="ses.mp3" controls="controls" autoplay="autoplay" loop="loop"> 
    Tarayıcınız desteklemediği için ses dosyası çalınamıyor.
   </audio>
  </body>
 </html>
Audio nun yanında kullandığımız dört ifadenin anlamlarını açıklayalım: 

src="ses.mp3" ses dosyasının yerini belirler. Hatırlarsanız resim dosyalarında da aynı şeyi yapmıştık. Benim ses dosyam aynı klasörde yer aldığı için sadece adını yazdım.
controls="controls"  eğer bunu yazmasaydık play tuşu gibi kontrol tuşları görünmeyecekti.
autoplay="autoplay" bu ifade sayesinde sayfa yüklendiği gibi ses dosyası yürütülmeye başlanır. Eğer kullanmazsak ses dosyasının çalması için 'play' tuşuna basılması gerekir.
loop="loop" Kullandığımız takdirde ses doyası biter bitmez baştan başlayacaktır.
Bu arada şunu da belirtelim ki <audio> elementinin desteklediği 3 tür ses uzantısı (.mp3 .ogg ve .wav) vardır. Tarayıcı ses dosyasını desteklemiyorsa ekranda bizim yazmış olduğumuz uyarı gözükür. Destekler ise uyarı yazısı görünmez.
Artık bir video dosyası ekleyebiliriz:
<!DOCTYPE HTML>
 <html>
  <body>
   <video src="video.ogg" width="250" height="200" controls="controls" loop="loop">
    Tarayıcınız desteklemediği için video açılmamaktadır.
   </video>
  </body>
 </html>

Ses doyası eklerken kullandıklarımızın aynısını kullandık. Farklı olarak bu sefer etiketimiz <video> idi ve boyutunu belirten height="..." ve width="..." ifadelerine yer verdik. Bu boyutlar da pixel cinsindendir.

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



Yorum Gönder Blogger

 
Top