Bilgi Bankası

HTML'ye Giriş

HTML'YE GİRİŞ

HTML, HyperText Markup Language, tarayıcı (browser)'lardan görebileceğimiz (Internet Explorer, Netscape gibi) internet dokümanlarını yaratmaya yarayan bir işaretleme dilidir. İnternet üzerindeki tüm sayfaların kaynağı HTML'dir. Tarayıcı olmadan HTML kodları birşey ifade etmez.

HTML dokümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.HTML, *.sHTML gibi uzantılarla kaydedilir. Bunun için notepad, pico, wordpad gibi editörler yeterlidir. Bunların yanında Frontpage, Dreamweaver, Homesite gibi bu iş için hazırlanmış ve kodlamayı kolaylaştıran programlar da vardır.

Her HTML dokümanı  ile başlar ve  ile biter. <> şeklinde görülen komutlara etiket (tag) adı verilir. Bir HTML dokümanı iki ana kısımdan oluşmaktadır:. . .etiketi arasında yer alan Başlık bölümü;. . .etiketleri arasında yer alan Gövde Bölümü. Başlık bölümü içine  etiketi konulur. title, tarayıcımızın en üstünde gözükür ve oluşturulan sayfanın başlığıdır.

Örnek:

Eğer hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, , ş, ö, ü) düzgün görünmesi için Başlık kısmı içerisine aşağıdaki meta etiketi eklenir.

title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde' ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız.

Herhangi bir web sayfasının HTML kodunu görmek istediğimiz zaman, farenin sağ tuşuna tıklayıp view source/kaynağı görüntüle seçeneğini seçeriz.

Bir etiketin nasıl davranması gerektiği hakkında bilgi içeren etiketin içindeki metne Değişken denir. Aşağıdaki örnekte body etiketinin içindeki bgcolor ifadesi değişkendir ve arkaplan rengini belirler. Çoğu etiket isteğe bağlı olarak ya da gerektiği için bağımsız değişkenleri kabul eder.

BASİT HTML ETİKETLERİ

METİNLER

Color yazı karakterinin rengini, face yazi tipini (arial, verdana, tahoma gibi), size da boyutunu belirler. Size değişkeninde kullanılan rakam 1'den 7'ye kadardır.

etiketi HTML 4. 0 'da desteklenmemektedir ama yine de taracıyıcılar etiketi ile yapılmış biçimlendirmeyi destekler. Hala pek çok web sayfasında etiketi kullanılmaktadır. Başlangıç seviyesi için etiketi kullanmak yeterliyken ilerki seviyeler için stilleri kullanmanız tavsiye edilir. Font etiketi ile birlikte aşağıdaki tabloda verilen etiketleri kullanarak sayfanızdaki metinleri biçimlendirebilirsiniz.

Not: Metin biçimlerken başladığınız etiketi kapatmayı unutmayın.

Renkler :

HTML dokümanlarında renkler ya İngilizce isimleriyle, ya da 16'lık sayı düzenindeki "hexadecimal" değerleriyle belirtilir.

En sık kullanılan ve hemen hemen bütün tarayıcıların desteklediği 16 renk aşağıdakilerdir:

Web renkleri ile ilgili ayrıntılı bilgiyi buradan bulabilirsiniz.

Örnek :

Bu örnekte sayfanın arkaplan rengi yeşil olur.

 aynı sonucu verir.

Örnek :

 Font rengi "indigo" oldu.  Etiketi kapattığımız için tekrar normale döndü.

LİNKLER:

Linkler . . .  etiketi içinde, href="" komutuyla belirtilir.

Örnek:

ODTÜ Ana Sayfası

ODTÜ Ana Sayfası

Bu örnekte bir de target değişkeni verilmiştir. Adresi verilen web sayfasının başka bir pencerede açılmasını isterseniz target="_blank" komutunu eklemeniz gerekir. Aynı pencerede açılmasını isterseniz ilgili değişkeni target="_top" şeklinde yazabilirsiniz. Hiç bir şey yazılmazsa da sayfa aynı pencerede açılır.

title değişkenini kullanarak da fare linkin üzerine geldiğinde gözükecek link açıklamasını ekleyebilirsiniz. Aşağıdaki örnekte fareyle linkin üzerine gelip beklerseniz Kobi Web Site yazısını göreceksiniz.

Mustafa Demir

Mustafa Demir

Eğer hazırladığınız dokümanlar arasında bir bağlantı kurmak istiyorsanıiz, etiketini aşağıdaki gibi kullanmalısınız.

Önceki sayfa

Bir e-posta adresine link vermek istiyorsanız:

E-posta atmak için tıklayın.

E-posta atmak için tıklayın.

Bu linke tıklandığında bilgisayarda kurulu varsayılan e-posta okuma programı açılır ve gönderilecek adres bölümünde etiket içinde belirtilen adres yazar.

Aynı doküman içinde bağlantı kurmak istersek tutturucu noktaları (anchor points) kullanırız. Tutturucu HTML sayfasında bir yer işaretidir. İsmi ile bir bölgeyi belirler ve bu tutturucuya bir link verebilirsiniz. Bu sayfadaki her konu başlığına bir tutturucu belirlenmiştir. Sayfa başındaki listede herhangi bir başlığa tıkladığınızda sayfa içindeki ilgili konu başlığına gider. Tutturucuların kullanımı aşağıdaki gibidir.

Linkler başlığına aşağıdaki gibi bir tutturucu belirleriz.

Linkler

Sayfanın herhangi bir bölümünde yukarıda belirlediğimiz tutturucuya aşağıdaki gibi link veririz

Linklere git

Sağ tarafta bulunan Başa Dön linkleri de bu şekilde hazırlanmıştır.

RESİM EKLEME

Resim ekleme:

şeklinde olur. Dikkat etmemiz gereken kulanacağımız resmin dizin yapısıdır.

Bağımsız Değişkenler :

alt: Resme açıklama vermemizi sağlar. Fareyi resmin üstüne getirdiğimizde, alt değişkeninde yazılan açıklama ekranda çıkar. Eğer resim açılmazsa, onun yerine açıklama görünür.

src : Resim dosyasının kaynağını belirtir.

** Eğer web sayfasının arka planında bir imajın çıkması istenirse:

 şeklinde yazılır.

Resimleri linke dönüştürmek için etiketi ile etiketini iç içe kullanırız.

Not: Resimlerin width ve height değişkenlerini belirtmeniz sayfanızın yüklenirken şeklinin bozulmasını önler.

LİSTELER:

Üç çesit liste vardır:
i. Sıralı Liste(Ordered List):

Örnek:

Örnekte görüldüğü gibi type değişkeni sıralı listenin türünü belirler. Type değişkeni için aşağıdaki değerlerden biri kullanılabilir:

type: {1, a, A, I, i}

Listeyi start değişkeni ile istediğimiz sayıdan baslatabiliriz:

Örnek:

ii. Sırasız Liste(Unordered List):

Benzer şekilde burada da type değişkeni sırasız listenin işaretini belirler. Type değişkeni için aşağıdaki değerlerden biri kullanılabilir:

type:{square, disc, circle}

iii. Tanımlama Listeleri (Definition List):

TABLOLAR

Tablolar etiketleri arasında oluşturulur.  etiketinden sonra daima  gelir. Her satır tanımlandığında , her hücre tanımlandığında da 
etiketi kullanılır.

Bağımsız Değişkenler:

border : Çerçevenin kalınlığını belirler. border="0" dersek tabloda çerçeve bulunmaz, bu miktarı arttırdıkça çerçevenin kalınlığı da artar.

cellpadding , cellspacing : Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların uzaklığı ise cellspacing değişkeni ile belirtilir.

bgcolor: 

şeklinde kullanarak bütün tablo ya da 
 şeklinde sadece tek bir hücre renklendirilir.

align : Hücredeki elemanın yatay konumunu belirler ve "right, left, center" opsiyonları ile kullanılır.

valign : Hücre elemanının düşey konumunu belirler ve opsiyonları "top, bottom, middle"dır.

colspan , rowspan : Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait . . etiketi silinir.

Html boşluk bırakma nasıl yapılır?

Space ile verilen boşluk işe yaramadığı için HTML özel karakter kodu ile boşluk vermek zorundayız. Tabi bu kaynak kodları için geçerlidir özel editör sayfalarında kullanılmaz. İki farklı yöntem ile HTML sayfasında bir ve birden fazla boşluk verebiliriz. 1) Kırılmaz boşluk bırakma (non-breaking space) Tek karaterlik boşluk için space tuşu kullanılabilirken birden fazla boşluk için ise aşağıdaki html kodlarını bitişik olarak kullanabilirsiniz.

''&nbsp;''  yada  ''&#160;''