Html Nedir? Yazım kuralları ve standartları, link oluşturma
4383 0

Bu makalede, html nedir? Html yazım standartları ve kuralları nelerdir? Link (Köprü) nasıl oluşturulur? sorularına cevap vermeye çalışacağız. Anlatımımız Html 4 teknolojisi için olacak. Html5 ile gelen yeniliklerden başka bir makalede bahsetmeyi düşünüyorum. Çünkü Html5 hala kararlı hale gelmiş değil.

Html Nedir?

HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. Yani bir programlama dili değildir. Arasındaki fark nedir? İşaretleme dili dediğimizde yalnızca biçimlendirme olarak düşünebiliriz. Yani metinleri, resimleri düzenleyip göstermek amacıyla kullanılır. Programlama dili dediğimizde içerisinde şart ifadeleri, döngüler vs. birçok  yapının bulunması gerekir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya da Pascal programında olduğu gibi bir derleyici ile derlememize gerek yoktur. Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.html dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. Yukarıda saydıklarımın dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir. Web istemcimizin adres satırına http://www.belgeler.org gibi bir ifade yazarsak sunucu sistem bize, o adresin www kök dizinindeki index.html (ya da hangi giriş sayfası tanımlı ise) dosyasını görüntüleyecektir.

Htm dili etiketlerden oluşur. Bir etiket örneği;

<strong>Yılmaz</strong>

Bu şekilde bir "Yılmaz" metninin kalın yada koyu yazılmasını sağlayabilirsiniz. etiketler "< >" içerisine yazılıyor ve başlagıçları, bitişleri var. Bitiş etiketleri "</ >" şeklinde yazılıyor. Bu standart bir etiketin yazım şeklidir. Şimdi Html'de temel etiketleri gösterelim, yani olmazsa olmaz!

<html>
    <head>
        <!--Bu kısımda sayfa ile ilgili tanımlamalar-->
    </head>
    <body>
        <!--Bu kısımda sayfada görünecek içerik-->
    </body>
</html>

Her etiketin bir bitişi olduğuna dikkat edelim. Bu standart etiket yazım şeklidir. Bir kural olmasa da, yazarken içteki etiketleri, içeriye öteleyerek yazmak okunabilirlik açısından iyi bir alışkanlıktır Yukarıda olduğu gibi). 

Yukarıdaki kodlara baktığınızda "<!-- -->" krakterleri arasına yazılan metnin farklı renkte olduğu da dikkatinizi çekmiştir. Her programlama veya betik dilinde olduğu gibi html'de de açıklama satırları vardır ve yazımı bu şekildedir. Gördüğünüz satırlar sadece açıklama amacı ile konur, herhangi bir çıktı üretmez. Derleyici tarafından dikkate alınmaz. Sadece kodlayıcıya araya notlar düşme imkanı sunar.

Etiketlere özellik verme

Maksadımız etiketleri tanıtmak ve bu bağlamda etiketlere bazı özellikler vermek için html'in yazım şeklini göstermek istiyorum. Css kullanılmaya başlandıktan sonra bu kullanım azalmaya başlasa da en azından kural olarak bilmeliyiz. Nitekim sınıf ve id tanımlamaları bu şekilde yapılmaktadır.

Örneğin sayfanın zemin rengini kırmızı yapmak istersek yukarıdaki kodlar içerisinde body etiketini;

<body bgcolor="red">

Şeklinde değiştirmeliyiz. Dediğim gibi burada önemli olan yazım şeklini anlamak ve aşina olmak. özellik "bgcolor" aldığı değer "red" şeklinde açıklayalım.

Yukarıda normal olrak etiket yazımını gördünüz. Bir de boş elementler vardır. Bunlar istisna olarak ta algılanabilir. Örneğin "<br/>", "<hr/>" gibi elementleri incelerseniz kendi içerisinde bittiğini görürsünüz. "<br/>" bir satır aşağı inmek için kullanılır, "<hr/>" yatay bir çizgi çizmek için. Aslında yaptığı işlere bakacak olursanız zaten normal yazımla yazılmasına da gerek olmadığını anlayabilirsiniz. Çünkü arasına yazılacak metni etkileyecek bir işlevi yok.  

Html yazım kuralları ve standartlar

  • Dosya ve klasör isimleri verilirken türkçe karakterleri(ğ,ü,ş,ç,ö,ı) kullanmamalıyız ve mümkünse küçük harflerle yazmalıyız. Dosya ismi iki kelimeden oluşuyorsa araya boşluk bırakmak yerine "_" karakterini kullanabilir veya ikinci kelimenin baş harfi büyük yazılabilir. (deneme_sayfasi.html,denemeSayfasi.html gibi)
  • Kodlar yazılırken girintili bir şekilde yazılırsa okunması daha rahat olur.
  • Farklı dosya tipleri yine farklı klasörler içerisinde tutulmalı. (Resim dosyaları için resim klasörü gibi)

Link (Köprü) Oluşturma

Link (Köprü) elementi bağlantılar oluşturmak için kullanılır. Neredeyse her html sayfada bulunur. Mevcut sayfadan başka sayfaya veya aynı sayfa içerisinde başka bir konuma gitmek için kullanılır. Yazım şekli aşağıdaki gibidir.

<a href="adres bilgisi" target="bağlantının açılacağı yer">Görünecek Metin</a>

<!--Örnek Link-->

<a href="http://www.google.com.tr" target="_blank">Google</a>

Örnekte görüldüğü üzere gideceği adres "href" özelliğinde belirtiliyor, "target" ile bağlantının nerede açılacağı yani örnekte "_blank" diyerek yeni pencerede açılacağını belirtmiş olduk. Target özelliğinde kullanılabilecek diğer parametreler şu şekilde;

  • "_blank"  bağlantıyı yeni bir pencerede açar.
  • "_self"  bağlantıyı aynı pencere içerisinde açar.
  • "_top" bağlantıyı aynı pencere içerisinde sayfanın en üstünden itibaren açar.
  • "_parent" açılan bağlantı, açık sayfanın yerinde bağlantıyı açar.
  • "_mainframe" açılan bağlantı belirtilen frame’in içinde açılır.

Şimdi de a etiketinin birkaç kullanım şeklinden bahsedeyim. "href" özelliğinde belirtilen adres şekline göre tanımlamalarda bulunalım.

1- Mutlak Adres İle Link(Köprü) Oluşturma

Az önceki örnekte yaptığımız şey zaten buydu. Adresi tam yolu ile belirttiğimizde mutlak adresleme yapmış oluruz. Yani "http://" den itibaren. Bu şekilde yapılmış linkler diğerlerine göre daha hızlı çalışır ve bazı durumlarda olmazsa olmaz hale gelir.(Arama motoru dostu url'ler oluştururken) Elinizden geldiği kadar mutlak yol ile oluşturun. Yine bir örnek verelim.

<a href="http://www.yilmazarslanturk.com" target="_self">Yılmaz ARSLANTÜRK</a>

2- Göreceli Adres ile Link (Köprü) Oluşturma

Bu biçimi anlamak için klasör yapısını bilmelisiniz ve bizim de elimizde böyle bir yapı olmalı. Aşağıdaki resimlere bakalım.

Kök klasörümüzsayfalar kalsörünün içi

 

 

 

 

 

 

Resimlerde kök klasörün adı "yilmaz_arslanturk" olarak görünmekte ve soldaki resim bu klasörün içerisini göstermekte. Sağdaki resim sayfalar klasörünün içerisini göstermekte. Bu bilgiler ışığında göreceli adres ile link oluşturalım.

Eğer "index.html" sayfasının içerisinde kod yazarken "sayfa1.html" dosyasına link vermek isterseniz, bulunduğunuz konumdan itibaren "sayfa1.html" dosyasının yolunu tarif etmelisiniz. Yani "sayfalar/sayfa1.html" şeklinde.

<!--index.html içerisine yazılacak-->
<a href="sayfalar/sayfa1.html">Sayfa1'e Git'</a>

Diyelimki "sayfa1.html" den "index.html' e gitmek istiyorsunuz. Bu durumda üst klasöre çıkmanız gerekir ve şu özel karakterleri "../" kullanmanız gerekir. Bunun anlamı bir üst klasöre çık demektir. Eğer iki üst klasöre çıkılacaksa bu durumda "../../" şeklinde yazılabilir. 

<!--sayfa1.html içerisine yazılacak-->
<a href="../index.html">index.html'e Git'</a>

Bir de dosyaların yan yana olma ihtimalini düşünebiliriz. Bu durumda yapmanız gereken sadece gidilecek dosyanın adını yazmaktır. Yani "sayfa1.html" in yanında "sayfa2.html" olduğunu varsayalım. Sayfa1'den sayfa2'ye link verilecekse href="sayfa2.html" yazılmalıdır. 

Göreceli adres yazım şekli linklerden daha çok resim yolunun belirtilmesinde veya stil dosyası içerisinde işinize yarayacaktır. 

3- Sayfa İçi (Çapa) Link (Köprü) Oluşturma

Bu köprü şekline mutlaka biryerlerde rastlamışsınızdır diye düşünüyorum. Aynı sayfa içerisinde başka bir konuma gitmek için kullanılır. Küçük bir örnek ile; diyelim ki sayfanın en üst kısmında konu başlıkları var ve alt kısımda bunların başlıklar halinde açıklmaları var. Her konu başlığına tıklandığında ilgili konuya gitmesini istiyorsunuz. Bu durumlar için son derece ideal bir kullanım olurdu.

<html>
    <head></head>
    <body>
        <span id="sayfa_ustu"></span>
        
        <a href="#konu1">Konu 1</a><br/>
        <a href="#konu2">Konu 2</a><br/>
        <a href="#konu3">Konu 3</a><br/>
        
        Bu kısma bolca metin ekleyin ve sayfanın aşağıya doğru uzamasını sağlayın.
        
        <h3 id="konu1">Konu Başlığı 1</h3>
        Konu içeriği falan filan
        
        <h3 id="konu2">Konu Başlığı 2</h3>
        Konu içeriği falan filan
        
        <h3 id="konu3">Konu Başlığı 3</h3>
        Konu içeriği falan filan
        
        <a href="#sayfa_ustu">Yukarı Çık</a>
    </body>
</html>

Kodlara bakacak olursanız linklerin "href" özelliğinin önüne "#" sembolü koyarak gitmesini istediğimiz elementin "id" özelliğindeki değeri yazdık. Zaten bütün numarası da bu. Gidilecek elemanın ne olduğunun bir önemi yok. Yeterki bir id bilgisi olsun.

^
X