Bu derste HTML ile bağlantı oluşturma, listeleme ve metin etiketlerini öğrenelim.
1- HTML' de bağlantı oluştuma
Html' de yazılara link vermek için;
<a href="gidilecekadres.htm">Yazımız</a>
Bu kod ile yazılarımıza link verebiliriz.
1-a. Verdiğimiz linkin yani bir sayfada açılmasını istiyorsak "target" etiketini kullanacağız.
<a href="gidilecekadres.htm" target="_blank">Yazımız</a>
"target" etiketi sadece "blank" ile kullanılmaz. "blank" ile birlikte self, top, parent ile de kullanılabilir.
"target="_blank"= Bağlantıyı yeni bir sayfada açar.
"target="_self"= Bağlantı aynı sayfa içerisinde açtırılır.
"target="_parent"= Açılan bağlantı o anda açık sayfayı oluşturmuş bir anasayfa varsa onun yerine konur.
"target="_top"= Bununla bağlantıyı aynı pencere içerisinde en üstten itibaren açtırırsınız.
1-c. Resim dosyalarına link vermek için;
<a href="gidilecekadres.htm"><img src="resimadi.resimuzantisi"></img></a>
Resim dosyalarını bu şekilde link verdiğimizde resimlerin kenarında bir border görüyoruz ve bu da bazen hiç hoş olmuyor. Bunu düzeltmek için borderı 0 a çekiyoruz.
<a href="gidilecekadres.htm"><img src="resimadi.resimuzantisi" border="0"></img></a>
Yazılarımıza link verdiğimiz zaman görüyoruz ki yazıların rengi bizim kontrolümüz dışında değişik bir renk almaktadır. Bunu düzeltmek için alink,link ve vlink etiketlerini kullanacağız. Bu etiketleri <body> tagımızın içine yerleştiriyoruz.
<body alink="#000000" link="#000000" vlink="#000000">
Listeleme etiketleri yazdığımız yazıları otomatik olarak sayı, yuvarlak vs. şeklinde sıralamamızı sağlar. Bunun için <ol> etiketini kullanacağız.
2- a. Yazılarımızı 1, 2, 3 şeklinde sayılarla listeleyelim. Bunun için type="1" yazarak sayılı bir şekilde sıralamasını söyleyelim.
<html>
<head>
<title></title>
</head>
<body>
<ol type="1">
<li>Anasayfa
<li>Hakkımızda
<li>Dersler
</ol>
</body>
</html>
Önizleme:
2- b. Şimdi de yazılarımızı a, b, c şeklinde sıralayalım. Bunun içinse type="a" yapıyoruz.
<html>
<head>
<title></title>
</head>
<body>
<ol type="a">
<li>Anasayfa
<li>Hakkımızda
<li>Dersler
</ol>
</body>
</html>
Önizleme:
2- b. Şimdi de 1, 2, 3, a, b, c yerine yuvarlak işaterini yapalım. Bunun için type="disc" etiketini kullanacağız.
<html>
<head>
<title></title>
</head>
<body>
<ol type="disc">
<li>Anasayfa
<li>Hakkımızda
<li>Dersler
</ol>
</body>
</html>
Önizleme:
2- c. Bu kezde bu yuvarlakların içini boş yapalım. Bunu yapmak için type="circle" etiketini kullanacağız.
<html>
<head>
<title></title>
</head>
<body>
<ol type="circle">
<li>Anasayfa
<li>Hakkımızda
<li>Dersler
</ol>
</body>
</html>
Önizleme:
2- d. Son olarak kare şeklinde yapalım. Kare yapmak için target="square" etiketini kullanacağız.
<html>
<head>
<title></title>
</head>
<body>
<ol type="square">
<li>Anasayfa
<li>Hakkımızda
<li>Dersler
</ol>
</body>
</html>
Önizleme:
3- Metin etiketleri ile yazılarımızı kalın, yan, alt çizgili yapalım.
3-a. "<b>" etiketini kullanarak yazılarımızı kalın olarak yazalım.
<b> etiketini kullanmadığımız zaman sol taraftaki görünümü elde ederiz. Ancak <b> kullandığımız sağ taraftaki görüntüyü elde ederiz.
3-b. <u> etiketini kullanarak yazılarımızı altı çizgili yazalım.
<u> etiketini kullanmadığımız zaman sol taraftaki görünümü elde ederiz. Ancak <u> kullandığımız sağ taraftaki görüntüyü elde ederiz.
3-c. <i> etiketini kullanarak yazılarımızı yan yatırarak yani italic şeklinde yazalım.
<i> etiketini kullanmadığımız zaman sol taraftaki görünümü elde ederiz. Ancak <i> kullandığımız sağ taraftaki görüntüyü elde ederiz.
İnşallah bilen içinde, bilmeyen içinde hayırlı bir döküman olmuştur.
