HTML Stil Özellikleri

20 Eylül 2009, admin

Tüm HTML elementlerine stil kazandırmak için, çeşitli stil nitelikleri veya özellikler kullanmamız gerekiyor.

Stiller, HTML 4 ile birlikte ortaya çıkmış ve HTML elementlerine renk katmanın yeni ve tercih edilen yöntemi olmuştur. Stil elementlerini kullanarak HTML’e yeni görünümler kazandırabilir veya CSS dosyalarıyla da bu etkiyi verebilirsiniz. Biz bu dersimizde HTML stillerinden bahsedeceğiz.

HTML Stil Örnekleri

style=”background-color:yellow” — arkaplanı sarı yapar

style=”font-size:10px” — yazı büyüklüğünü 10 pixel yapar

style=”font-family:Times” — Yazı karakterini ‘Times’ yapar

style=”text-align:center” — Yazımızı sayfaya ortalar.

Onaylanmamış etiketler ve nitelikler

HTML 4 içinde bazı etiket ve nitelikler onaylanmamıştır. Onaylanmamaktan kastımız; HTML ve XHTML in ilerki sürümlerinde desteklenmeyecek olmasıdır.

Aşağıdaki etiket ve nitelikleri kullanmaktan kaçınınız.

Etiketler	Tanım
<center>	İçeriği ortalama
<font> ve <basefont>	HTML fontları tanımlar
<s> ve <strikeout>	Üstüçizgili metni tanımlar
<u>	Altıçizgili metni tanımlar

Nitelikler	Tanım
align	Metni hizzalamayı tanımlar
bgcolor	Metnin arkaplan rengini tanımlar
color	Metnin rengini tanımlar

Yukarda bahsedilenlerin yerine HTML stillerini kullanın.

Arkaplan rengi

<body style="background-color:yellow">

Font Ailesi, Renk ve Boyut

<p style="font-family:courier new; color:red; font-size:20px">

Metin Hizzalama

<h1 style="text-align:center">

Köprüler, Çapa ve Bağlantılar

Köprü bir websitesine adres bağlama anlamına gelir (hyperlink diye bilinir).

Hyperlinkler birçok web kaynağına bağlantı sağlayabilir: Bu bir HTML sayfası, resim, ses veya film dosyası vb. olabilir.

Çapa (anchor) bir doküman içindeki herhangi bir köprü bağlantısı demektir. Bir sayfa içinde istenilen noktaya gitmemizi sağlar.

HTML çapa elementi <a>, hem köprü hem de çapayı kullanırken kullanılır.

HTML Linki

<a href="url">Adres</a>

Not: Bu, ister bir websayfası linki veya resime verilmiş bir link olabilir.

href Niteliği

href niteliği bir “adres” bilgisi verir.

<a> elementi websayfamıza olan linki tanımlar:

<a href="http://www.turkcescript.com/">TurkceScripti Ziyaret edin!</a>

Target-Hedef Niteliği

Target niteliği sayfanın nerde açılacağını belirtir. Örnekte de göreceğiniz üzere, tırnak içinde kullanılan _blank , linkin yeni sayfada açılacağını belirtir. Aşağıdaki kod websayfamızı ayrı bir sayfada açmamızı sağlayacaktır: (TurkceScripti Ziyaret edin! Yazısına etiketlenen link’e tıklandığında sayfamız yeni bir sayfada veya sekmede açılacaktır.)

<a href="http://www.turkcescript.com" target="_blank"> TurkceScripti Ziyaret edin!</a>

Niteliğin Adı

Niteliğin adı kullanıldığında, <a> elementi, HTML dokümanında bir isimlendirilmiş çapa olduğu anlamına gelir.

İsimlendirilmiş çapalar özel bir şekilde gösterilmezler. Okuyucuya görünmezler.

İsimlendirilmiş çapaların yazımı:

<a>Herhangibir içerik</a>

İsimlendirilmiş çapaya yönlendirilen linkin yazımı:

<a href="#etiket">Herhangibir içerik</a>

Href niteliğindeki # işareti, isimlendirilmiş çapaya link olduğunu gösterir.

Aynı dokümandan İpucu bölümüne link için:

<a href="#ipucu">İpucu bölümüne geçiş</a>

Diğer bir dokümandan İpucu bölümüne geçiş:

<a href="http://www.webadresi.com/sayfa.htm#ipucu">İpucu bölümüne geçiş</a>

İsimlendirilmiş çapalar genellikle tek bir web dokümanında “İçindekiler” bölümü oluşturulduğunda, başlık menülerine hızlı geçiş için kullanılır. Sayfa başına dönmek için de isimlendirilmiş çapaları kullanabiliriz. Eğer web tarayıcınız isimlendirilmiş çapanızı sayfa içinde bulamazsa sayfanın başına döner, herhangi bir hata vermez.

Resim etiketi ve Src Niteliği

HTML de resimler <img> etiketi ile tanımlanır. <img> etiketi tek başına kullanılır ve kapanış şekli farklıdır.

Bir sayfada resmi göstermek için src niteliği kullanmanız gerekir. Src İngilizce de “source” yani “kaynak” kelimesinin kısaltmasıdır. Src niteliğinin değeri; sayfada kullanacağınız resmin URL’sidir (web adresi).

Resmi tanımlamak için aşağıdaki kodu yazmak gerekir:

<img src="url" />

URL; resmin yerini belirtir. “ipod_nano1.jpg” isimli resmimizin yerini “http://www.turkcescript.com/wp-content/uploads/2009/09/ipod_nano1.jpg” şeklinde tanımlarız.

Alt Etiketi

Resim için bir belirleyici yazı eklemek istersek alt etiketini kullanırız.

<img src=" ipod_nano1.jpg" alt="Renkli ipod nano" />

“alt” etiketinin amacı; eğer sayfada web tarayıcısı resmi yükleyemezse, neyi göremediğini bilmesi açısından önemlidir. Web tarayıcısı gösteremediği resim yerine alt etiketindeki yazıyı gösterecektir.

Resim etiketleri