HTML'de Bağlantı Oluşturma, Listeleme ve Metin Etiketleri

Bu derste HTML ile bağlantı oluşturma, listeleme ve metin etiketlerini öğrenelim.

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>



1-b. "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>



1-d. 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>



1-e. 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 tagımızın içine yerleştiriyoruz.


<body alink="#000000" link="#000000" vlink="#000000">



2- Listeleme Etiketleri

Listeleme etiketleri yazdığımız yazıları otomatik olarak sayı, yuvarlak vs. şeklinde sıralamamızı sağlar. Bunun için
    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. "" etiketini kullanarak yazılarımızı kalın olarak yazalım.


    <b>HTML Dersleri</b>



    etiketini kullanmadığımız zaman sol taraftaki görünümü elde ederiz. Ancak kullandığımız sağ taraftaki görüntüyü elde ederiz.





    3-b. etiketini kullanarak yazılarımızı altı çizgili yazalım.


    <u>HTML Dersleri</u>



    etiketini kullanmadığımız zaman sol taraftaki görünümü elde ederiz. Ancak kullandığımız sağ taraftaki görüntüyü elde ederiz.





    3-c. etiketini kullanarak yazılarımızı yan yatırarak yani italic şeklinde yazalım.


    <i>HTML Dersleri</i>



    etiketini kullanmadığımız zaman sol taraftaki görünümü elde ederiz. Ancak 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.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Değerli arkadaşımız, bundan sonraki derslerinizde resimleri Sanalkurs üzerine yüklememeniz durumunda dersleriniz onaylanmayacaktır. Bilginize.
:Saol :D
thanks:kirp:
tşk...:kirp:
kısa yolu var :D

Yukarı Git