Şimdi Ara

HTML Bağlantı Oluşturma ve Özelleştirme

Sıcak Fırsatlarda Tıklananlar

Editörün Seçtiği Fırsatlar

Bu Konudaki Kullanıcılar:

2 Misafir - 2 Masaüstü

5 sn

1
Cevap

0
Favori

475
Tıklama

Daha Fazla
İstatistik

Konu İstatistikleri Yükleniyor

Konuya Özel

0 oy

Öne Çıkar

Cevapla

Sayfa: 1

Giriş

Mesaj

Düzenli bir anlatım için yerinde okuyun! Kaynak >>http://goo.gl/RME2QH

HTML bağlantı oluşturmada doğal olarak HTML bağlantı etiketleri kullanılır, ingilizce karşılığı links olan bu etiket, bana göre, HTML etiketlerinin en basitlerindendir. En azından bir blogger kullanmış birisi link vererek ve bu linklere basit renkler ekleyerek bu etiket ile karşılaşmış olabilir. Yine de arşivimizde bu gibi basit bir etiketin eksik olmaması için bu yazıyı da ileride koca bir arşiv olacak yazı dizimize ekliyorum.

Türkçe karakter sorunu yaşıyorsanız buraya gidebilirsiniz.

HTML’de başka bir dökümana link oluşturmak
bunun için <a> etiketini kullanırız.

<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=110658941&url=http://www.akifakkaya.com" data-href="http://www.akifakkaya.com">Akif Akkaya - Sadece Blog</a>
Önizleme: Akif Akkaya – Sadece Blog

Üst kısımdan kod mantığını kolaylıkla anlayabilirsiniz ancak şunu belirtmek istiyorum, bu hataya bir çok kişi düşüyor, “http://www.akifakkaya.com” olarak gösterilmiş bölüme adres eklemek. Eğer bu kısma” http://” dizinini eklemeden bir url yazarsanız açılan pencere alt kısımdaki gibi gözükecektir. Bunu düzeltmek için “http://” dizinini url başına eklemeyi unutmayın, ya da direkt url’yi kopyala yapıştır yapabilirsiniz.

Hedef (target) Özelliği
Bu özellik ile ile verilen bağlantının yeni bir pencerede açılmasını sağlayabilirsiniz.

<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=110658941&url=http://www.akifakkaya.com/" target="_blank" data-href="http://www.akifakkaya.com/" target="_blank">Akif Akkaya - Sadece Blog</a>
Önizleme: Akif Akkaya – Sadece Blog

Renk Ekleme
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=110658941&url=http://www.akifakkaya.com/" data-href="http://www.akifakkaya.com/">Akif Akkaya - Sadece Blog</a>
Önizleme: Akif Akkaya – Sadece Blog

Buradaki mantık da şu şekilde; ben linke renk elemiyorum, metine ekliyorum. Bu yüzden normal metini nasıl renklendiriyorsak, bunu da o şekilde yapmamız gerekiyor.

Akif Akkaya
“#” ile başlayarak yazılmış sayı dizisi renginizin HTML kodudur, bunu dilediğiniz gibi değiştirerek size en uygun rengi bulabilirsiniz. son verdiğim kodu da <a href kodu ile birleştirerek renklendirilmiş bir bağlantı metni oluşturabiliriz.

Boyutlandırma
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=110658941&url=http://www.akifakkaya.com/" data-href="http://www.akifakkaya.com/">Akif Akkaya - Sadece Blog</a>
Önizleme: Akif Akkaya – Sadece Blog

Buradaki mantık da renk ekleme ile aynı. Yine metini boyutlandırıyormuş gibi bağlantı metnini boyutlandırıyoruz.

Akif Akkaya - Sadece Blog
“large” yazan kısım, karşılığı büyük, yazının büyük olmasını sağlar. x-small ya da xx-small kodları ile yazıyı daha da küçültmek ya da x-large ile yazıyı daha da büyütmek mümkün.

Düzenli bir anlatım için yerinde okuyun! Kaynak >>http://goo.gl/RME2QH