Tags Posts

HTML’de Linkler

HTML’de ilk H ve T harfleri Hypertext’in kısaltmasıdır. Hypertext ise linklerden oluşmuş metin anlamına gelmektedir. HTML de linkleri kullanarak yazılan web sayfaları için tasarlanmıştır. İnternetin birbirine bağlı yapısı da linklerden gelmekte olduğu için linkler bulunmayan bir web sitesi düşünülemez. Şimdi web sitenize linkleri nasıl yerleştireceğinizi beraber inceleyelim.

Çapa(anchor) etiketi de denen link etiketi <a> ile belirlenir ve linkin adresi de bu etiket içine yazılır.

<!DOCTYPE html>
<html>

<head>
    <title>İlk Sayfam</title>
</head>

<body>

    <h1>Bu benim ilk web sayfam</h1>

    <h2>Bu site neden yapılmıştır?</h2>
    <p>HTML öğrenmek için</p>

    <h2>Where to find the tutorial</h2>
    <p><a href="http://www.vidobu.com">Vidobu</a></p>

</body>

</html>

Linkin adresi “href” niteliği kullanılarak belirlenmiştir. Link örnekteki gibi tamamen farklı olabileceği gibi sayfanıza bağlı da olabilir.

Örnek dosyanızla aynı klasörde bir başka .hmtl dosyasını aşağıdaki gibi ekleyebilirsiniz.

 <a href="ogrendiklerim.html">HTML'de neler öğrendim?</a>

Aynı zamanda aynı sayfa içindeki başlıklara da link verebilirsiniz. Bunun için öncelikle başlığa “id” niteliği kimlik oluşturmanız gereklidir. Sonra başına kare(#) koyarak kimlikle link verebilirsiniz.

<h2 id="baslik2">HTML'de Başlıklar</h2>
<a href="#baslik2">Başlıklar için tıklayınız.</a>

HTML’de Tag, Attribute ve Element

HTML her ne kadar sadece metinden oluşsa ve sadece içerik girmek için kullanılsa da girdiğimiz içeriklerle ilgili basit görsel düzenlemeler yapmamıza da olanak tanır. Aşağıdaki komutlarla bu düzenlemelere başlayabilirsiniz.

1. Tag (Etiketler)

HTML dökümanlarının en basit yapısı olan etiketler, içeriklerinizin başında ve sonunda bulunur ve onlara anlam katmaya yarar.

Bir önceki sayfada oluşturduğunuz ilk web sayfanızı aşağıdaki gibi değiştirin:

<!DOCTYPE html>
<html>
<body>
    This is my first web page
</body>
</html>

Şimdi dökümanı kaydedin ve tarayıcıdaki HTML dökümanını yenileyin.

Sayfanızın görünümüyle ilgili hiçbir değişiklik olmadı ama zaten HTML’in amacı görünüm değil içerik katmaktı ve bu eklediklerimizle ilk sayfanız web sayfalarının temel özelliklerine kavuşmuş oldu.

<!DOCTYPE html> satırı, döküman tipi deklarasyonu olarak adlandırılır ve tarayıcıya HTML’in hangi versiyonunu kullandığınızı anlatır (HTML5 de olabilir). Eğer bu satırı yazmazsanız tarayıcı ne açtığınızı anlamayacak ve tuhaf sonuçlar verecektir.

<html> satırı, dosyanın açılış etiketi olarak ifade edilir. Tarayıcıya kapanış etiketi </html>‘ne kadar ki yazıların HTML dökümanı olduğunu anlatır.

<body> ve </body> arasında kalan kısım ise tarayıcıda görülen ana içeriktir.

  • Her etiketin kapama etiketi olmayabilir.
  • İçeriğin başında bulunan bütün etiketlerin kapatma etiketi de olmalıdır.

2. Nitelikler (Attributes)

Etiketler aynı zamanda bazı nitelikler de taşıyabilir. Nitelikler açılış etiketinde, tırnak işareti içinde yazılır.

<tag attribute="value">Margarine</tag>

Daha detaylı olarak ilerleyen bölümlerde nitelikleri inceleyeceğiz.

  • Her ne kadar tırnak işaretleri olmazsa olmaz değillerse de, hem pratik yapmanız hem de tutarlı ve temiz bir kodlama için gereklidir.

3. Ögeler (Elements)

Etiketler ögelerin başında ve sonunda bulunur. Elementler(ögeler) ise sitenizin görünen kısmıdır. Örneğin <body> ve </body> yazıları ve arasında bulunan içerik “body” yani ana öge olarak adlandırılır. Yine aynı şekilde “<title>” ve “</title>” etiketlerini kullanarak oluşturulan “<title>Rumple Stiltskin</title>” başlığı başlık elementi (ögesi) olarak adlandırılır.