HTML KURSU
( HYPER TEXT MARKUP LANGUAGE )

    HTML, Web sayfaları için temel anlamlandırma dilidir. Kullanımı kolay ve esnek bir dildir. Öğrenilmesi de kolay ve zevklidir.

    Bir web sayfasını HTML ile kod yazarak yapmak için illaki çok gelişmiş editör programlarına ihtiyacınız yoktur. Herhangi bir kelime işlemci programı ( MS Word ) ile veya Windows'ta Başlat - Programlar - Donatılar'da yer alan Notepad ile bile yapabilirsiniz.

    HTML için standartları " World Wide Web Consortium " adındaki internet standartları konsorsiyumu belirlemektedir.

    HTML ile ilgili son gelişmeleri öğrenebilmeniz için " World Wide Web Consortium " un web sitesini ziyaret edebilirsiniz.

www.w3.org

Sayfa Hazırlama

    HTML ile ilk sayfamızı oluşturmaya başlayalım. Yapacağınız sayfaları içinde barındıracak bir klasör oluşturalım önce. Adı da " deneme " veya sizin seçeceğiniz herhangi bir şey olabilir.
    Windows' da bulunan Notepad' i kullanarak sayfalar yapacağız. Notepad' de Başlat menüsünden  ulaşabilirsiniz (Başlat/Programlar/Donatılar/Notepad). Şimdi Notepad' i açtıktan sonra aşağıdaki  resimde görülen tagları ve yazıyı yazalım.

    HTML Tag' ı sayfanın bir html dokümanı olduğunu belirtir. Sayfanın bitimi tag sonlandırılır. Bazı tag' lar açılıp sonlandırılırken, bazı tag' lar tek başına da kullanılabilir.
    HEAD tag' ları arasına yazılan şeyler sayfada görüntülenmez. Sayfa hakkında browser' lara ve arama motorlarına bilgiler veren nesneler yer alır. Örneğin sayfanın başlığı TITLE tag' ları arasına yazılır. Bu browser ' ınızın üst kısmındaki mavi çubukta görüntülenir. Aynı zamanda sayfanız bookmark yapılığında, yani sık kullanılanlar listesine eklendiğinde, sayfanızın başlığı ile görüntülenir. Bu yüzden çok uzun başlıklar vermemek daha mantıklıdır. Başlıklarda türkçe karakterde rahatlıkla kullanabilirsiniz. Sayfanıza herhangi bir başlık vermezseniz sayfanız " Untitled Page " , " New Page " gibi isimlerle otomatik olarak adlandırılır.
    BODY tagları arasına yazacağımız her şey browser tarafından görüntülenir.
    Tüm bu yazdıklarımızdan sonra sıra sayfamızı kaydetmeye geldi. Notepad menüsünde  yer alan " Dosya " yazan yere girip, farklı kaydet seçeneğini seçiyoruz. Sayfamıza bir isim vermemiz gerekiyor. Biz örneğimizde sayfamızı " ilksayfam.html " olarak adlandırdık. Bu noktaya dikkat edin. Sayfamızın adını yazdıktan sonra uzantısını " html " olarak yazıyoruz. Bu " htm " de olabilir. Bu uzantı sayfanızın bir web sayfası olmasını sağlayacaktır. Artık sayfamızı kaydettik. Şimdi dosyamıza çift tıklayalım ve bilgisayarımızdaki geçerli browser' da yaptığımız ilk deneme sayfasını görüntüleyelim. Eğer her şeyi doğru yaptıysanız sayfanız browser' ınızda görüntülenecektir.

FONT TAG' I VE PARAMETRELERİ ( ALT UNSURLARI ) :

METİN BİÇİMLENDİRME 1

<font face="..........." size="...." color="#......" >

FACE = Fontun tipi bu parametre ile belirlenir. Herhangi bir font tipi brlilemezseniz borwserınız kendi default font tipi ile sayfanızı görüntüler. En çok bilinen font tipleri Tahoma, Verdana, Arial, Times New Roman, MS Sans Serif, Comic Sans MS 'dir. Sayfanızdaki yazılarınız için dikkat etmeniz gereken en önemli etken fontun yaygınlığıdır. Yukarıda saydığım fontlar Windows'da bulunan standart fontlardır. Siz herkesde bulunmayacak bir font seçerseniz o font diğer bir bilgisayarda yok sayılacak ve kendi default fontu ile yazılar görüntülenecektir.
    Bir başka önemli noktada ihtiyacınıza göre font seçimidir. Çünkü her fontun kendine özgü özellikleri bulunmaktadır. Arial genelde hatları sade bir fonttur. Tahoma ve Verdana özellikle küçük boyuttaki yazılarda daha iyi sonuç verir. Verdana yazı tipi tahomaya çok benzemesine rağmen harfler arasındaki açıklık bir miktar daha fazladır. Bu okumayı kolaylaştırır. Ama aynı zamanda kelimeleri de uzatır. MS Sans Serif ise daha mikro yazılar için iyi bir seçimdir. Comic Sans MS, daha çok ciddeyeti az olan eğlenceli yazılar için kullanılabilecek bir font tipidir.

YAZI TİPLERİ İLE İLGİLİ ÖRNEKLER

Arial   Arial   Arial   Arial
Tahoma   Tahoma    Tahoma   Tahoma
Verdana   Verdana    Verdana   Verdana
MS Sans Serif   MS Sans Serif   MS Sans Serif   MS Sans Serif
Times New Roman   Times New Roman   Times New Roman   Times New Roman
Comic Sans MS   Comic Sans MS   Comic Sans MS   Comic Sans MS

SIZE = Bu parametre ile fontun büyüklüğü belirlenir. Fontlar için büyüklükler 1 ve 7 arasındadır. Daha küçük yazılar için - 1 - 2 - 3 ... - 6 kullanılırken, daha büyük yazılar için +1, +2, +3 ... +6 kullanılabilir. Fontun nerede ne büyüklükte olacağı ihtiyacınıza göre değişir.

Bir numaralı büyüklük ( size="1" )
İki numaralı büyüklük ( size="2" )
Üç numaralı büyüklük ( size="3" )
+ 1 numaralı büyüklük ( size="+1" )
COLOR = Fontunuzun yazı rengini bu parametre ile belirlersiniz. color="#FFFF00" gibi altı haneli 16 lık bir renk sistemdir. Buradaki renk kodlarına RGB renk kodları denir.

SARI
KIRMIZI
YEŞİL
MAVİ
MOR
BEYAZ

BAŞLIKLAR

    Sayfımıza ekleyeceğimiz başlıklar için aşağıdaki başlık imleri kullanabilir. Başlıklar 1 den 6 ya kadar farklı boyutlardadır. Başlıklardan önce ve sonra birer satır otamatik olarak boş kalır. Ayrıca başlıklar otamatik olarakda kalın yazı tipinde olurlar.

<h6> Altı numaralı başlık </h6>

<h5> Beş numaralı başlık </h5>

<h4> Dört numaralı başlık </h4>

<h3> Üç numaralı başlık </h3>

<h2> İki numaralı başlık </h2>

<h1> Bir numaralı başlık </h1>

METİN BİÇİMLENDİRME 2

Sayfa içerisine yazdığımız yazıların aşağıdaki taglar ile nasıl şekillendirildikleine bakalım

<b> ... </b>

Kalın Yazı : Bu taglar arasına yazılan yazılar kalın olarak gösterilir. Tag açıldıktan sonra belli bir yerde kapatılmazsa sayfanın kalanında yazılar kalın olarak gösterilir.

Bu yazı kalın gösterilecek

<strong> ... </strong>

Kalın Yazı : Bu taglar arasına yazılan yazılar kalın olarak gösterilir. Tag açıldıktan sonra belli bir yerde kapatılmazsa sayfanın kalanında yazılar kalın olarak gösterilir.

<i> ... </i>

Bu yazı sağa yatık gösterilecek

<u> ... </u>

Bu yazı altı çizili gösterilecek

<s> ... </s>

BAĞLANTILAR

Web sayfalarımızın etkileşimli olması için vazgeçilmez unsurlardan biri, " bağlantılar ". Şimdi bağlantılar ile nasıl bir saydan diğer sayfaya atlandığını veya nasıl bir sayfa öğresine tıklayarak diğer bir öğeye atladığımızı görelim.   

Basit bir link : <a href="sayfa.html">SAYFA</a>
Bu linke yani bağlantıya tıkladığımız zaman " sayfa.html " adlı dökümana atlayacağız.

Şimdi bir örnek yapalım. <a href="baglantilar.html>BAĞLANTILAR</a>

HTML KURSU

Şimdi bu linke tıkladığınız zaman şu an okumakta olduğunuz sayfa yeniden görüntülenecektir.

Sizde kendi  kaydettiğiniz sayfaya vereceğiniz bir linkle bu işi halledebilirsiniz. 

Resimlere link : <a href="resim.jpg">RESİM</a>
Gördüğünüz gibi sadece resmin adını yazmamız yeterli.

Dosyalara link : <a href="dosya.zip">DOSYA</a>
Bu bağlantı türü de diğerlerinden farklı değil. Buradaki linke tıkladığınızda dosya bilgisayarınıza inecektir.

Başka klasörlere link : <a href="klasor/sayfa.html">SAYFA</a>
Dosyanın içinde bulunduğu klasör ve dosya adı yazılarak yapılır.

Bir web sayfasına link : <a href="http://www.websayfasi.com">WEB SAYFASI</a>

Resim kullanarak link : <a href="wallpaper.html"><img src="wallpaper.jpg"></a>

Resimli Linklerde çerçevi kaldırmak : Resim kullanarak oluşturulan bağlantılardaki çerçeveler göze hoş gelmeyebilir. Bu çerçeveleri kaldırmak için img takısı içindeki border="..." değerini " 0 " olarak vermemiz yeterli.

Bağlantıları farklı sayfada açmak : Sitemizdeki bazı linklerin içinde bulunduğu sayfa yerine başka bir sayfada açılmasını isteyebilirsiniz. Bu durumda bağlantı tag' ımızın içinde target="_....." özniteliğini kullanacağız. Linkimizin yeni bir pencerede açılması için bu özniteliğin içerisine yazmamız gereken değer "_blank" tır.

<a href="tasarim.html" target="_blank">WEB TASARIMI</a>

Ana Sayfa