Bölüm 16 (HTML Dersleri), iFrames ve Temel Derslerin Sonu
HTML ile kendi web sayfalarınızı oluşturabilirsiniz. W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.
Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.
HTML iFrame
Web sayfasının içinde web sayfası gösterimi iFrame ‘dir.
<iframe src=”URL”></iframe> şeklinde kullanılır. URL alınması istenen sayfadır.
Iframe – Height ve Width
Height ve Width genişlik ve yüksekliğin belirlenmesini sağlar iframe’de de. Piksel olarak olduğu gibi yüzdelik olarak da belirtilebilir.
<iframe src=”iframe.htm” width=”200″ height=”200″></iframe> gibi kullanılır.
Iframe – Sınırları/Çerçeveyi yani border’i kaldırma
Frameborder özelliği border boyutu belirlenir ve bu sayede isterseniz kenarları gösterirsiniz isterseniz göstermezsiniz 0 değeri ile.
<iframe src=”iframe.htm” frameborder=”0″></iframe>
Bir hedef ya da bağlantı olarak iframe’i kullanma
Bir iframe bir bağlantı için hedef çerçeve/frame olarak kullanılabilir.
Linke bağlı target/hedef özelliği iframe’in name özelliğinin değerini taşıması gerekir.
<iframe src=”iframe.htm” name=”iframe”></iframe>
<p><a href=”http://nefarkederki.com” target=”iframe”>Nefarkederki</a></p>
gibi kullanılabilir.
Temel HTML Dersleri burada bitmiş bulunmakta nihayet. Şimdi sizin ihtiyaç duyabileceğiniz Hexadecimal renk kodları, renk adları, Referans olarak tüm gördüğümüz elementler, renk değerlerini paylaşacağım ki yapacağınız tasarımda sizin başvurabileceğiniz bir kaynak olsun.
Kısaca renk bilgisini de aktarayım; color özelliğini alan her elementin rengini değiştirebilirsiniz. Web üzerinde ve ekran üzerinde kullanılan renk yönetimi RGB üzerine kuruludur. Red, green, blue ifadesi ile kırmızı, yeşil ve mavi. Bunlar aslında ışığın tayflarıdır yani bir dereceleridir. Biz bunları renk olarak algılarız. Işığın derecesine göre biz bu renkleri ayırt ederiz.
HTML’de hexadecimal renk kodları ya da rgb türünden değerler kullanılır ki hexadecimal rgb’nin bir kombinasyonudur. Hexadecimal’de en küçük değer 00’dır. En yüksek değer ise 255’tir. Hexa kodları genel olarak çift halindedir ve 3’lü olarak var olur başındaki diyez ile.
Misal;
#000000 ya da #ff00ff
ilki siyah ikincisi de pembe benim gözümde. 🙂
R G ve B değerlerinin her biri 256 değer aldığından toplam 16 milyon renk çeşidi var mevcut.
İşte referans kaynağınız renklere ve hexa kodlarına dair. Buraya Tıklayın!
Burada da renklerin isimleri mevcut. Buraya Tıklayın!
Renk değerleri de mevcut Hexa’ları ile Burada!
Ve en nihayetinde! HTML 4.01 ‘e ait ve temel HTML kodlarının tüm listesi!
Bundan sonraki gün bir arayüzün nasıl tasarlanacağı, döküman tipi, css kullanımı, head bölgesi, meta bölgesi, script kullanımı, özel karakterlerin kodları, url nedir, url kodlaması, web sunucu ve özet ile kitabımızın sonunu getirmiş olacağız.
Bu sayede ne olacak?
Bu sayede sizler bir arayüz tasarlayacak yetkinliğe ulaşmış olacaksınız. Ama sadece html kodlarını bildiğinizden bilmeniz gerekn bir takım programlar ve birkaç şey daha olmalı.
Mesela; html kodlarını kolayca yazmak işlemek için Adobe Dreamweaver‘ı bilmelisiniz, ya da bunun yerine Notepad++ adlı programı kullanabilirsiniz.
Web arayüz tasarımının başlangıcında da imaj yönetimi gerekir ki bunu da Photoshop/Corel Draw/Gimp/Illustrator/Fireworks ile yapabilirsiniz.
Tasarladığınız sayfayı şekillendirebilmek için CSS bilmelisiniz ki HTML5‘i de anlatacağım, html5’te tamamen Css üzerinden gidiliyor.
Bir de kullanıcı ile etkileşime giren ve görsellik katan sayfalar/arayüzler tasarlamak içinse Javascript ve/veya Jquery gibi script dili bilmeniz ya da bir takım kalıp bilmeniz yeterli olacaktır.
Anlattıklarımdan eksik kalan kısımlar ise yarından sonra. Çünkü Yarın bir arayüz nasıl yapılır onu göreceğiz. XHTML, HTML5 vb bilgilere de önümüzdeki günlerde değineceğim.
Yararlı olması dileğiyle!