Top

baslik Tag

Ç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.


Sitenizin iyi görünmesi için layout çok önemlidir. Sayfanızın düzenini çok iyi ayarlamalısınız.

Website Düzeni/ Layout ‘u

Çoğu web sitesi içeriklerini gazete ve dergilerdeki gibi çoklu sütunlara ayırarak yerleştirir.

Bu sütunlar ise ya <table> etiketi ile ya da <div> etiketi ile ayrılır. Bir miktar CSS kullanımı da renkli sayfa görünümü, sayfa konumlandırma, element yerleşimi, arkaplan resimi gibi sayfaya canlılık katar.

HTML’de Layout – Table Kullanımı

En basit şablon oluşturma yolu <table> etiketleri ile mümkündür. Aşağıdaki örnekte 3 satır ve 2 sütuna sahip bir düzen göreceksiniz tablolar ile; -birinci ve son satırın yaslanması ve sütunlar colspan özelliğini kullanmıştır-

Misal;

<html>
<body>

<table width=”500″ border=”0″>
<tr>
<td colspan=”2″ style=”background-color:#FFA500;”>
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign=”top”>
<td style=”background-color:#FFD700;width:100px;text-align:top;”>
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style=”background-color:#EEEEEE;height:200px;width:400px;text-align:top;”>
Content goes here</td>
</tr>

<tr>
<td colspan=”2″ style=”background-color:#FFA500;text-align:center;”>
Copyright © 2011 W3Schools.com</td>
</tr>
</table>

</body>
</html>

Örneğin kaynağı; Buradadır.

Not; HTML tablolarıyla güzel şablonlar oluşturabilmek mümkün olduğu halde; tablolar sunulacak veriler için dizayn edilmiştir, tasarım için değil.

HTML’de Layout – Div Elementi kullanarak yani tablosuz kullanım

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 dökümanlarında başlıklar önemlidir.

HTML Başlıkları

Başlıklar <h1> ‘den <h6>’ya kadar tanımlanır. <h1> en önemli başlığı tanımlar, <h6> ise en az önemliyi. Tarayıcılar otomatik olarak başlıklardan önce ve sonra boşluk bırakır buna “a margin” denir.

Bunun örneklerini yapmıştık daha önceki derslerden birinde.

Başlıklar önemlidir

Sadece başlıklar için başlık etiketlerini kullanmalısınız. Yazıyı büyük ya da kalın yapmak için değil. Arama motorları web sayfanızın içeriğini ve yapısını index’ler başlık etiketlerini kullanarak.  Kullanıcılar sayfalarınızın içeriğini kopyalayarak aldığından beri de başlıklar belgenin yapısını gösterir olmuştur. ( yani word’e yapıştırdığında otomatik olarak başlık olarak algılanacak h etiketleriniz)

h1 başlıkları ana başlığınız olarak kullanılmalı, ardından h2, sonra h3 diye giderek takip etmeli.

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.


Temel etiketler

Bir web sayfası için temel etiketler şunlardır;

<html>

<head>

<title>Burası başlık,yukarıdaki Ne Fark eder ki yazan yer gibi(tarayıcıda)</title>

</head>

<body>

</body>

</html>

Bu etiketleri uygulamayı unutmayın. Bunları yeni metin.txt’ye gördüğünüz gibi yazıyorsunuz. CTRL+S ile metin belgesine kayıt edin ilk önce ki yazdıklarınız kaybolmasın. Ardından farklı kaydet ile index.html’yi değiştirin. Ve index.html’yi çift tık ile tarayıcıda gösterin. Yazdığınız kodlar ile sayfa bembeyaz olacak yalnız tarayıcıda title etiketinde yazan yazı gözükecektir.

HTML’de başlıklar

Html’de başlıklar(headings) <h1>’den <h6>’ya kadar gider. En büyük olan 1 numaralı, en küçük olan 6 numaralıdır.

Örnek olarak bunları da uygulayabilirsiniz. Uygulayacağınız başlık etiketlerini <body> ile </body> arasına yazmalısınız. Body etiketi web sayfasının tamamen beyaz görünen kısmını temsil eder. Örneklerimiz;

<h1>Bu başlık h1 etiketine sahip.</h1>

<h2>Bu başlık h2 etiketine sahip.</h2>

<h3>Bu başlık h3 etiketine sahip.</h3>

<h4>Bu başlık h4 etiketine sahip.</h4>

<h5>Bu başlık h5 etiketine sahip.</h5>

<h6>Bu başlık h6 etiketine sahip.</h6>

 

HTML’de paragraf