HTML Dersleri 4 Temel HTML Etiketler

TEMEL ETİKETLER

BAŞLIKLAR

Başlık İngilizce ‘de heading kelimesine tekabül eder.  Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. başlık etiketleri önem derecesine göre başlık oluşturulmasını sağlar. En önemli başlık etiketi olan <h1> etiketi varsayılan olarak en büyük punto ile gösterilen etikettir. <h2>, <h3>, <h4>, <h5> ve <h6> etiketleri ise önem derecelerine göre gittikçe küçülerek gösterilir., <h6> ise en küçük puntoyu belirtir.

Şimdi de bu kodların çıktılarına bakalım:

<h1>…<h6> Elementi Kullanımı

Görüldüğü gibi <h1> en büyük başlığı, <h6> ise en küçük başlığı simgeliyor.

Bu elemente ait align niteliğinin alabileceği dört değer vardır. Bunlar, right (sağa hizalar), left (sola hizalar), center (ortalar) ve justify (iki yana yaslar).

PARAGRAFLAR

Paragraflar <p> etiketi ile belirtilir. İçerikte paragraf eklenmek istendiğinde kullanılır. Örnek kullanımı şöyledir:

Şimdi de bu kodların çıktılarına bakalım:

<p> Elementi Kullanımı

HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar.

Paragrafları hizalamak için p etiketinin align özelliği kullanılır. Dört farklı değer alabilir: center (ortala), right (sağa), left (sola), justify (iki yana hizala). Bunlara ait örnekler ve çıktısı şöyledir: Şimdi de align özelliği kullanarak bir örnek daha yapalım.

Şimdi de bu kodların çıktılarına bakalım:

<p> Elementi Kullanımı

BAĞLANTILAR

HTML’ de bağlantılar (link’ler) <a> etiketi içine yazılır. a harfi İngilizce’ deki attribute kelimesinin kısaltmasıdır. Dilimizde “atıf” gibi bir anlama gelmektedir.

Bağlantı etiketinin yazımı <a>…</a> şeklindedir; fakat açma etiketindeki a harfinden sonra daima href atıfı yazılır. HTML belgelerinin içinden başka bir HTML belgesine veya aynı belgenin başka bir bölümüne kullanıcıyı yönlendirmeyi sağlayan yapılara link (bağlantı, çapa) adı verilir. Linkler bizi her bir HTML sayfası için web tarayıcının adres çubuğuna URL yazmaktan kurtarır. Web sayfalarında gezinmeyi daha kolay ve zevkli hale getirir. 

<a> etiketi oluşturulurken bir URL adresine bağlantı tanımlamak amacıyla href veya çapa oluşturmak amacıyla name özelliklerinden biri mutlaka belirtilmelidir.

<a> etiketi, hem düz metin hem de img etiketi ile oluşturulan bir resmi içerebilir.

Bu elemana aynı zamanda çapa (anchor) etiketi denir. <a>…</a> etiketleri arasında kalan her şey bağlantının bir parçası olur ve bir kullanıcı bu bölgeye geldiğinde fare işaretçisi parmak haline dönüşür. Ayrıca pek çok web tarayıcısı varsayılan durumda link içeren metinleri altı çizili ve normal metinden farklı renk olarak görüntüler.

Link etiketinin kullanımı aşağıdaki gibidir. “href” niteliğine gidilecek belgenin URL adresi yazılmalıdır. Eğer HTML belgesi ile aynı klasörde ise sadece belgenin adı yazılarak da kullanılabilir.

Şimdi aşağıdaki örneği inceleyelim:

a açma etiketinin içine href yazdıktan sonra eşittir = yazdık ve tırnak işaretleri “” içine de gitmek istediğimiz adresi yazdık. Bu yazım şekli her zaman böyledir.

Şimdi de çıktımıza bakalım:

<a> Elementi Kullanımı

Örnekteki Bu bir linktir yazılı linke tıkladığımızda, kullanıcı tanımlanan web adresine yönlendirilecektir. 

Farklı bir sayfaya link vermek ise şu şekildedir. Örneğin, sayfamızın bulunduğu aynı dizindeki farklı bir sayfaya link verme işlemi aşağıdaki gibidir.

<a> Etiketi ve target (hedef) parametresi

Target parametresi ile dökümanın nerde açılacağını belirtebilirsiniz.

Aşağıdaki bağlantıya tıklanırsa, döküman yeni bir pencerede açılacaktır.

Şimdi de çıktımıza bakalım:

Target Parametresi Kullanımı

Örnek çıktımızdaki linke tıkladığımızda kullanıcı, tanımlanan web adresine yeni bir sayfa açılarak yönlendirilir.

<a> etiketi ve name parametresi

Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra direkt geçiş yapılabilir.

Kullanım Biçimi:

Id ismi kullanarak o dosya içerisinde bir yere geçmek:

Bu örneğimize ait bir de çapa tanımlayalım.

<a> etiketi ve name parametresine ve çapa kullanımına ait html dosyasını download edebilirsiniz.

<a> etiketi ve mailto parametresi

<a>…</a> etiketinin href niteliğine URL yazmak yerine mailto:  ifadesi ile başlayarak bir e-posta adresi yazdığınızda link tıklandığında ilgili kişiye e-posta gönderebilmek amacıyla kullanıcının bilgisayarındaki e-posta istemcisi çalışır.

Kullanım Biçimi:

GÖRSELLER

Diyelim ki sayfamıza bir resim (görsel) eklemek istiyoruz. Bunun için <img> etiketini kullanacağız. Görsel İngilizce’ de image anlamındadır ve “img” ise image kelimesinin kısaltmasıdır.
HTML belgelerin içerisinde resim görüntülemek için <img> etiketinden faydalanılır. Dökümanlarımız içerisine image eklemenin 3 farklı yolu vardır.

<img> etiketi kapalıdır, yani bu etiket mutlaka parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz.

Sayfanızda bir resim görüntüleyebilmek için “src” parametresini kullanmak zorundasınız. Src, “source” (kaynak) anlamına gelir. Buraya görüntülemek istediğiniz resim dosyasının yolunu yazarsınız.

Kullanım biçimi:

img elementi a etiketindekine benzer bir şekilde daima src atıfı ile yazılır. src’den sonra eşittir (=) işareti ve eşittir’ den sonra ise tırnak işaretleri (“”) içinde görselin adresini yazarız. <img> etiketinin src atıfı ile yazılmasının bir zorunluluk olduğunu belirtmiştik. İkinci bir atıf ise alt’ tır. İngilizce’ deki alternate kelimesinin kısaltmasıdır ve arama motorlarının sitenizdeki görselleri indeksleyebilmesi için oldukça gerekli bir atıf’ tır. Şunu unutmayın ki sitenize ya da sayfanıza ne zaman bir görsel eklerseniz daima alt atıfı ile resmin ne olduğunu belirten kısa bir yazı yazın.

İMG ETİKETİNE AİT NİTELİKLER
NİTELİK AÇIKLAMA
width Resmin genişliğini belirtir; tam sayı değerler alabildiği gibi %20 şeklinde oransal değerler de alabilir. Oransal değerler aldığında sayfanın mevcut değerlerine oranlı olarak genişlik hesaplanır.
height Resmin yüksekliğini belirtir; tam sayı değerler alabildiği gibi %20 şeklinde oransal değerler de alabilir. Oransal değerler aldığında sayfanın mevcut değerlerine oranlı olarak genişlik hesaplanır. Resminizin oranını bozar ve orantısız görünmesini sağlar. Bu sebeble ya sadece width ya da height atfını kullanmalısınız.
border Resmin çevresine çerçeve oluşturur. Varsayılan çerçeve rengi siyahtır. CSS dili kullanılarak çerçeve rengi değiştirilebilir. 1,2…. gibi tam sayı değerler alır. Değerler büyüdükçe çerçeve kalınlaşır.
alt Resim görüntülenmediği veya olması gereken konumda bulunamadığı durumlarda resim olması gereken yerde alt niteliğinde ifade edilen metin görüntülenir.
align Resmin sağa, sola veya ortaya (left, right, center) hizalanmasını sağlar.
hspace Resim ile metin arasındaki yatay boşluğu ayarlamayı sağlar. Diğer bir değişle Resmin sağındaki ve solundaki boşlukları ayarlar. Tam sayı değerler alabildiği gibi %20 gibi oransal değerler de alabilir.
vspace Resim ile metin arasındaki dikey boşluğu ayarlamayı sağlar. Diğer bir değişle Resmin sağındaki ve solundaki boşlukları ayarlar. Tam sayı değerler alabildiği gibi %20 gibi oransal değerler de alabilir.
name Resme bir isim vermeyi sağlar. Javascript ve CSS dillerinde resmi kontrol edebilmek için gereklidir.
Id Javascript ve CSS dillerinde resmi kontrol edebilmek için gerekli olan bir niteleme ifadesidir.
title title atfı başlık anlamındadır. Fare ile resimlerin üzerine geldiğinizde “Verilen Resim İsmi” yazacaktır.

Bunu bir örnek ile pekiştirelim. Örneğin dökümanımız içerisine bir resim ekleyelim ve sağa hizalayalım.

Örnek çalıştırıldığında şöyle bir çıktı oluşur:

EKRAN ÇIKTISI

Bir başka örnek yapalım.

Bu örnekte resim ile metin arasındaki boşlukları ayarlamak için hspace ve vspace kullanımı gösterilmiştir.

Örnek çalıştırıldığında şöyle bir çıktı oluşur:

HSPACE VE VSPACE KULLANIMI

Örnek kod içindeki hspace ve vspace nitelikleri silindiğinde veya her birine sıfır değeri verildiğinde ise görüntü aşağıdaki gibi olacaktır:

HSPACE VE VSPACE KULLANIMI YAPILMAZSA

Görüldüğü üzere hspace ve vspace nitelikleri kullanılmadığında kullanmış olduğumuz resim veya fotoğraf iç içe giriyor.

HTML BELGELERİNE EKLENEBİLEN RESİM TÜRLERİ

Grafik değişim biçimi (GİF) formatındaki resimler afiş, küçük resim ve resimli düğmeler için tercih edilir.  Bunun temel nedeni, gif biçimindeki resimler şeffaf bir arka plan desteğine sahiptir. Özellikle geometrik olmayan resimleri sayfaya eklerken arka plan rengi sebebiyle tasarımların bozulmaması için sıklıkla tercih edilir. Buna karşın gif resimler jpg resimlere göre daha çok yer kaplar ve sadece 256 adet renk paleti ile sınırlıdırlar.

JPEG (Joint Photographic Experts Group) formatında sınırsız renk seçeneği vardır ve yüksek bir sıkıştırma oranı sağladığı için download süreleri kısa olur sabit disk alanından tasarruf sağlarlar. JPEG resimlerde şeffaf arka plan desteği yoktur. Çoğunlukla sitenizin tasarım işleri yerine fotoğraf galerileri veya web albümü için tercih edilir.

PNG (Portable Network Graphics) formatı JPG biçimine bir alternatif olmasının yanı sıra GIF biçiminin imkânlarını da sağlar. Hem gerçek renk paleti hem de gri ölçeklemeli renk paletine sahiptir. PNG hemen hemen her durumda resimleri GIF formatına göre daha iyi sıkıştırır.

Resimlere Link Vermek

<a>…</a> ifadeleri arasına metin ifadeler yazılabildiği gibi resimler de yerleştirilebilir. Bu durumda resim link elde edilir. Kullanıcı resmi tıkladığında href ile belirtilen URL adresine yönlendirilir.

Örnek çalıştırıldığında aşağıdaki gibi bir çıktı oluşur.

RESİMLERE LİNK VERMEK

ETİKETLERİ GRUPLANDIRMAK

HTML‘de div kullanımı önemli bir yer kaplar ve yetenekli ve basit bir elementtir. Dersimizin bu bölümünde div elementinin kullanımı ve özellikleri üzerinde duracağız.
HTML öğrenmek istiyorum diyorsanız, div‘ i özellikle öğrenmelisiniz. Çünkü div etiketi, neredeyse tüm web sitelerinin yapıtaşı durumundadır.

Div etiketi küme veya bir alan oluşturur. Div etiketi <a>, <b>, <span> vb. etiketlerinden ayıran temel özellik, Div‘ in bir blok element olmasıdır. HTML‘ de elementler 2’ye ayrılır. Bunlar Blok Elementler ve Satır içi elementlerdir.
Satır içi elementler içine ne koyarsanız o boyuttadır ve yan yana dururlar. Blok elementlerinse kendi blokları mevcuttur. Alabilecekleri en geniş boyutu alırlar. (Eğer aksi stil dosyasında yazılmamışsa) ve alt alta dururlar. Div’ leri birer kutu gibi düşünebiliriz. Bunlar boyutlarına ve özelliklerine göre iç içe veya alt alta olabilir.

Şimdi bunu örnekle anlatalım;

Bu örneği yazıp çalıştırdığımızda sadece yazı görünecektir. Çünkü normalde div’ lerin kenarları olmaz. HTML’ de style=”” özelliği ile stil bilgileri girebiliriz. Şimdi örneğimizi biraz geliştirelim;

Ekran çıktısı şu şekildedir.

Stil bilgilerinin anlamları için CSS konularımıza bakmanızı öneririm ama şimdilik kısa bir açıklama yapalım;

  • width:150px ve width:180px değeri div’in genişliğini belirler.
  • Background-color: değeriyse arka alan rengini belirler.
  • color: değeriyse yazı font’unun rengini belirler.

Şimdi bunu da öğrendiğimize göre bir adım ileri gidelim.

İÇ İÇE DİVLER

Bu konuyu daha iyi anlamanız için div’ lere farklı arkaplan renkleri vereceğim.

ÖRNEK :

Ve çıktımız şu şekildedir:

Sanırım iki örneğe bakıp aradaki farkı anladık. 2. resimde padding: değerine 0 (sıfır) verdik. Div ve buna benzer blok elementlerde CSS kullanırken class ve id’i bilmemiz gerekir. class ve id özelliği kullanımıyla da ilgili küçük bir örnek yapalım.

Ekran çıktısı şu şekildedir:

Div konusunu genel olarak kavradığınızı düşünüyorum. Şimdi divleri yan yana konumlandıralım. Bu konu HTML dışında CSS’in bir konusu sayılır ama Div’ leri anlatırken Float’ ı anlatmamak olmaz.

ÖRNEK :

Şimdi örneğimizi biraz açıklayalım. Bir üst başlığı, bir yazı bölümü, bir sağ bölümü, bir de sayfa altı olan bir site temeli yaptık. #main id’ siini divlerimizi ortalamak ve asıl genişlik değerini belirlemek için oluşturduk.Yani #main in içine koyduğumuz div’l er 900px‘lik bir alanı kaplasın diye.
Başlık bölümüne width (genişlik) değerini verdik. Arka planın gri’nin bir tonu olmasını belirledik. Height (yükseklik) değerini verdik ve margin-bottom (div altı kenarlık uzaklığı) değerini de belirledik ki div leri birbirinden ayırıp daha kolay görebilelim.
Diğer div’lerde de benzer CSS özelliklerini kullandık. Sadece #post ve #sidebar‘ da float:left ve float:right değerini verdik. Bu iki değer sola konumlandır ve sağa konumlandır anlamına gelir.
class=”clear” olarak belirlediğimiz div’ deki clear:both; özelliğiyse bu div’ den sonra float değerini sıfırlamak için kullanılır. Eğer clear:both; kullanılmazsa bir sonraki div’ de ya sağa yada sola konumlanmış olarak görünebilir. Bu yüzden konumlandırmanızın bittiği div’ in hemen ardına bu şekilde bir div oluşturmanız tasarımınız için önemlidir. 

Ekran çıktımıza bakalım.


Div’ lerle bütün sitenin iskeletini oluştururuz. İstediğimiz div’ i istediğimiz yere koyarak içini doldururuz. Burada HTML4 etiketleri ile bir tasarım yaptık HTML 5 konusuna geçtiğimizde ise aynı tasrımı HTML 5 etiketleri ile yapacağız. Div’ ler hakkında daha yazılacak çok şey var ama onu CSS derslerimize bırakalım.

AÇIKLAMA SATIRI

C, C++, Java, PHP gibi diller, kodların insanlar tarafından daha kolay anlaşılması için yorum (comment) ekleme olanağı sunarlar. Bu dillerde // veya /* …… */ ile yorum ekleme işlemi HTML dilinde ise <!– …………. –> ile yapılır.

Herhangi bir HTML kodu yorum başlama-bitiş etiketleri  arasına alındığında web tarayıcı bu satırları çalıştırmaz ve ekranda görüntülenmez. Bu yorumlara yalnızca web tarayıcı açıkken sağ tıklayarak açılan menüden “Sayfa Kaynağını Görüntüle” seçeneği ile ulaşabilirsiniz. Kod yazarken yazdığımız kodların yanına ileride bu kodun ne olduğunu ya da neden kullanıldığını hatırlamak için yorumlar eklemek isteyebiliriz. Ya da başka biri bizim yazdığımız kodları okurken not bırakmak isteyebiliriz.

Şimdi aşağıdaki örneği inceleyelim…

Bu yazı ekranda görünür cümlesinin altına “Bu yazı ise yorum satırı olduğundan ekranda görünmez” diye bir not bıraktım. Şimdi bu kodların çıktısına bakalım…

Görüldüğü gibi yazdığım yorum tarayıcı ekranıma yansımadı. Sayfanızın neresine yorum bırakırsanız bırakın yazdığınız bu notlar hiçbir zaman kullanıcılar tarafından görünmeyecektir. Sadece siz ve sizin yazdığınız kodları inceleyen kişiler bu notları okuyabilir.

Yorum satırlarını kullanıcılar ekran çıktısında görüntüleyemezler. Ancak Sayfa kaynağını görüntülediklerinde yorum satırlarına ulaşabilirler.

Bu dersimiz de bu kadar. Yine uzun oldu ama umarım faydalı olmuştur. Bir sonraki dersimizde HTML içeriklerini biçimlendirme konusunu anlatacağım.

About egitimkanalim.com

Check Also

HTML Dersleri 15 HTML 5 Media Etiketleri

YENİ ETİKETLER VE ANLAMSAL WEB HTML 5 ile gelen ActiveX, Flash Player, Quicktime gibi web …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir