Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com'dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools'a ait paylaşacak olduğum online editörü kullanabilirsiniz.HTML Doctypes / Döküman Türleri Bir döküman türü...
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.
Çerçevelerle daha doğrusu frame’ler ile, bir tarayıcı penceresinde birden fazla html belgesi görüntüleyebiliyorsunuz. Çağırılan her bir html belgesi bir çerçeve olarak anılır, her bir frame(çerçeve) de diğerlerinden bağımsızdır.
Çerçeveleri kullanma neden avantajlı değildir;
- HTML’nin ileri versiyonlarında destek bulamayabilir
- Kullanımı zordur çünkü tüm sayfayı basmak zordur.
- Web geliştiricisinin birçok HTML belgesini takip etmesi gerekir.
Frameset elementi bir veya daha fazla frame elemanını tutar. Her bir frame elementi ayrı bir belgede tutulur.
Frameset elemanı frameset’te kaç tane sütun ve satır olacağını belirler ve kaçının ne kadar pixel ya da yüzdelik alan kaplayacağını belirler.
<frame> etiketi belirli bir pencereyi tanımlar bir frameset içinde.
Aşağıdaki örnekte 2 sütunlu bir frameset mevcut.
Birinci sütun tarayıcının %25’ini kaplıyor. İkincisi ise %75’ini kaplıyor. “frame_a.htm” birinci sütunda, “frame_b.htm” ise ikinci sütundadır.
Misal;
<frameset cols=”25%,75%”>
<frame src=”frame_a.htm” />
<frame src=”frame_b.htm” />
</frameset>Not; frameset’in sütunlarının alanı yanı cols, piksel cinsinden de yazılabilir ve sütunlardan geriye kalan yıldız ile kalan alanı kaplaması sağlanabilir. (cols=”200,500″) ve (cols=”25%,*”) gibi.
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.
En önemli konu bence. Benim en çok zorlandığım konuydu zamanında yanlış öğrendiğim için. Ama siz, daha şanslısınız.
HTML formları bir server’a veya kurucuya Türkçesi ile, veri göndermek için kullanılır. Daha doğrusu kullanıcıdan veri elde etmek için.
Bir form, giriş elemanları içerebilir. Yazı alanları(text fields), checkbox’lar(çoklu seçim kutuları, üzerlerinde tik olabilen kare kutucuklar), radio-button’lar (radyo butonları tekli seçime izin verirler), submit button’lar (onaylama butonları, girilen verileri göndermeye yarar) ve daha fazlası gibi… Bir form, seçim listeleri, textarea, fieldset, legend ve etiket elemanları da içerebilir. Hepsi açıklanacak bu derste.
Misal;
<form>
.
input elements
.
</form>
En önemli form elemanlarından biri giriş elemanlarıdır.
Giriş elementleri kullanıcının bilgisini seçmesini ya da girmesini sağlar.
Bir giriş elemanı type özelliğine göre değişiklik gösterir. Bir giriş elemanı yazı alanı girebilmek için, kendisine uyan şıklara tik atmak için, şifre girmek için password yani, radio button’dan seçim yapmak için, girdiği verileri onaylamak ya da resetlemek gibi daha fazla şey olabilir.
En çok kullanılan girişler aşağıda anlatılacaktır.
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.
Tablolar <table> tagı(etiketi) ile tanımlanır.
Bir tablo sıralarla/satırlarla bölünmüştür. (<tr> etiketiyle) Her bir satır da hücrelere bölünmüştür. (<td> etiketiyle) td, ‘Table stands’ anlamında kullanılır ve içeriğin hücre verisini tutar. Bir td etiketi yazı, link, imaj, liste, form ve diğer tabloları taşıyabilir.
Misal;
<table border=”1″>
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hucre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>
Bunu yazdığınızda durumu fark edebilirsiniz.
Eğer siz atamazsanız herhangi bir değer, border yani çerçeve gözükmeyecektir. Bazen yararlı bu ama çoğu zaman da sınırların yani çerçevenin gözükmesini isteriz.
Border çıkması için border özelliğini kullanıp sayı vermemiz yeterli.
Misal;
<table border=”1″>
<tr>
<td>Satır 1, hücre 1</td>
<td>Satır 1, hücre 2</td>
</tr>
</table>
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’de görüntüler <img> tagı ile tanımlanır.
<img> etiketi boştur yani özellik içerir sadece ve kapanış tagı yoktur.
Sayfada bir görüntü göstermek için görüntünün kaynağını src ile yani source ile göstermeniz gerekir. Göstermek istediğiniz resimin url değerini alır src çift tırnak içinde.
Misal;
<img src=”url” alt=”some_text“/>
url yerine nefarkederki.com/resimler/logo.gif, some text yerine de nefarkederk i logosu gibi bir yazı gelebilir. Ek olarak kapanışa dikkat etmelisiniz.
Url resimin depolandığı yeri gösterir. Genelde depolamamız bir resim klasöründe olur. Yukarıda URL’nin içindeki resimler yazan yere images, img gibi dosya isimleri de geldiği olur.
Tarayıcı belgenin neresinde img etiketi varsa orada görüntüler resimi.
Resim eğer gösterilmezse diye alt özelliği gireriz. Çünkü resim gözükmediğinde alt özelliğinin değeri gözükür. Yazar tarafından tanımlanır değeri.
<img src=”boat.gif” alt=”Big Boat” />
Burada şuna dikkat etmek gerek. Alt özelliğinin değeri, resime dair kesin bilgi veren 2 bilemediniz 3 kelimelik bir ifade olmalı. Ayrıca engellileri de düşünmelisiniz ki web sayfalarında ne olduklarını onlara da söyleyin bu sayede. Üstelik doğru olan ve w3C’nin istediği alt verilerinin girilmiş olmasıdır. Ayrıca kimi tarayıcılar sorunlar nedeniyle nesneleri gösteremeyebilir. Kısaca alt verisini girmek zorundayız.
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.
CSS(Cascading Style Sheets yani yığma stil dosyaları) HTML elemanlarını şekillendirir.
Bu sayfadaki örneğe bakabilirsiniz. Look! Styles and Colors yazan yerde Bak! Şekillendirmeler ve renkler, This text is in Verdana and res yazan yer Bu yazı Verdana ve kırmızı, This Text is in Times and green yazan yer Bu yazı times ve yeşil, This text is 30 pixels high yazan yer ise bu yazı 30 piksel büyüklükte olarak Türkçe’ye çevirebiliriz.
Daha önce de belirttiğim gibi bunlar in line yani satır içi kullanımdır ve HTML5’te artık yeri yoktur. Daha doğrusu kimi yerlerde kullanabilirsiniz ama heryerde kullanmamanız gerekmektedir.
CSS html 4 ile beraber tanıtıldı, html elementleri stillerinin daha iyi yolunu desteklediğini göstererek.
Css;
- Ayrı bir stil dosyası olarak(Css dosyası)
- HTML head bölgesinde style elementi ile
- Tekil HTML elemanlarında yani satırda style özellikleri ile
HTML’de kullanılabilir.
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...
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 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 <b> ve <i> gibi etiketleri kullanarak çıktıyı biçimlendirir bold ve italik yazı gibi. Bu etiketlere biçimlendirme etiketleri denir.
<b>bu kalın yazılmıştır.</b>
<i>bu italik yazılmıştır.</i>
Bununla birlikte, anlam farkı mevcuttur bu yorumlanan kodlarda.
<b> ile <i> kalın ile italik yazıyı temsil eder sadece. <strong> ile <em> ise kullanıcının tarayıcı tarafından yorumlananların “önemli olma” derecesini görmesini sağlamaktadır. Günümüzde, tüm bilinen tarayıcılar strong’u bold olarak em’i de italik olarak algılamakta daha doğrusu sunmaktadır. Fakat gün gelir de tarayıcılar strong etiketli yazıların üzerini renklendirirse sarıyla hatalı bir örneğimiz olur ve bold olarak tanımlayamayız.