Merhaba.

HTML eğitimlerimize bu yazımda bağlantılara, sayfalara, video, ses ve indirme dosyalarına link verme işlemini anlatarak devam ediyorum.

Web Matrix’i açalım. Bir önceki dersten kaldığımız yerden kodlamaya devam edelim.

Farklı Sayfaya Link Verme

Bir internet sayfası içinde pek çok farklı sayfaya gitmenizi sağlayan olay link vermedir.

Bu işlem

<a href=”Yönlendirme Kaynağı/url”>Bağlantı Adı (Görünen Yazı)</a>

şeklinde gerçekleştirilir.

Şimdi istediğimiz bir sayfaya link verelim.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <a href="http://www.industryolog.com/">Industryolog Anasayfa</a>

    </body>
</html>

Gördüğümüz gibi link oluştu. Artık bu linke tıkladığımızda bizi Industryolog Anasayfasına götürecektir.

Linki Yeni Sayfada Açtırmak

Şimdi gelin biraz daha detaylarına bakalım.

Bu gördüğümüz haliyle linke tıkladığımızda yeni sayfayı var olan sayfamızın üzerinde açtığını görürsünüz. Ancak ziyaretçinin başka bir sayfaya giderken bizim sayfadan tamamen çıkması bir dezavantajdır gitmesini önlemek gerek. Bunu sayfayı yeni sekmede açtırarak çözebiliriz.

Bunun için yapmanız gereken kodlama a tag’i içerisinde 

target=”_blank”

ifadesini yazmaktır.

Target 4 farklı parametre alır. Bunları WebMatrix üzerinde görebilirsiniz. Deneyerek öğrenebilirsiniz.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <a href="http://www.industryolog.com/" target="_blank">Industryolog Anasayfa</a>

    </body>
</html>

Şimdi sayfanızı yenileyip linke tıkladığınızda yeni sayfada açtığını göreceksiniz.

Link Renklendirme

Normal bir metin renklendirmekten hiç bir farkı yoktur. a tag’i içine style özelliğine 

style=”color: renkdeğeri”

yazmanız yeterli olacaktır.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <a href="http://www.industryolog.com/" target="_blank" style="color: blue">Industryolog Anasayfa</a>

    </body>
</html>

Text Decoration Özelliği

Linkin altının çizili olması biraz tasarım açısından eksik ve göze hoş gelmeyen bir durum gibi size de böyle geliyorsa gelin bu altındaki çizgiyi kaldıralım. Yapmamız gereken işlem text-decoration özelliğini none yapmaktır.

Stille ilgili özelliklerin tümü style içine yazılır.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <a href="http://www.industryolog.com/" target="_blank" style="color: blue; text-decoration: none">Industryolog Anasayfa</a>

    </body>
</html>

Font Değiştirme

Link daha belirgin hale getirmek için fontunu ve fontun boyutunu değiştirelim.

font-family : fontu değiştirir.

font-size: fontun boyutunu belirler.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <a href="http://www.industryolog.com/" target="_blank" style="color: blue; text-decoration: none; font-family: Trueno; font-size: 20px" >Industryolog Anasayfa</a>

    </body>
</html>

Sayfa İçinde Link Verme

Güzel olaylardan biride sayfa içinde istediğiniz alana link verebilme olayıdır.

Çoğunuz şahit olmuşsunuzdur, bir sayfanın sonuna kadar geldiğinizde yukarı doğru bir ok size en başa gidebileceğinizi işaret eder. İşte bunu yapabildikleri kodlama sayfa içi link vermek olayıdır.

Şimdi öncelikle biraz kalabalık bir paragraf yaratalım. 3 tane başlığımız olsun. En başa bu üç başlıktan, bu bölümlere aynı sayfanın içinde link verelim.

Bunu yapmak için nereye link vericeksek o satıra şu kodlamayı yapmamız gerek.

<a name=”bastaraf”>Gidilecek Bölüm İsmi</a> 

tırnaklar içindeki değer size özel bir değerdir. İstediğiniz ismi verebilirsiniz.

Daha sonra bu bölüme link vermek istediğimde yapmam gereken şudur.

<a href=”#bastaraf”>Git</a> 

Kodlama içinde daha net anlayacağız.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>

        <a href="#Espor1">ESPOR NEDİR 1</a> <br>
        <a href="#Espor2">ESPOR NEDİR 2</a> <br>
        <a href="#Espor3">ESPOR NEDİR 3</a> <br>

         

       <p> Herkese merhaba. Bugün ele almak istediğim konu espor. Bu yazımda aşinası olmadığımız bu dünyaya ufak bir kapı aralamak istedim. Ülkece henüz çok iyi bilmediğimiz elektronik spor kavramı, geçtiğimiz yıl ülkemizin aldığı şampiyonluğun ardından hepimizin aklına “Nedir bu espor?” sorusunu getirdi. Sorularınızın cevabını yazımda bulmanız dileğiyle.</p>


<a name="Espor1"><h1>ESPOR NEDİR 1</h1></a>



<p>Bildiğimiz sporların aksine espor mental aktivitenin fiziksel aktiviteden daha fazla olduğu bir spor dalı .Tam olarak tanımlayacaksak espor online oyunlar üzerine kurulu bir spor dalıdır. Elektronik spor, online oyun oynamayı izleyiciyle buluşturmakta bu konuda prosfesyonel spor oyununu izleme mantığından esinlendiğini söyleyebiliriz. Elektronik spor, dünyanın dört bir yanından kişilerin internet aracılığıyla buluşup oyun oynayabileceği ya da belli zamanlarda düzenlenen uluslararası büyük elektronik spor organizasyonları aracılığıyla dünyanın farklı yerlerinden gelen insanların tanışabileceği bir platformdur.</p>

<a name="Espor2"><h1>ESPOR NEDİR 2</h1></a>



<p>2000 yılından sonra internet kullanımının artışı; dünyanın dört bir yanındaki insanlarla oyun oynayabilme olanağı sağlamıştır. Son yıllarda online oyunların, oyuncuların ve izleyicilerinin oluşturduğu kitle göz ardı edilmeyecek kadar fazladır. Özellikle son 10 yılda teknolojinin hızla ilerlemesi ve hemen hemen her çocuğun oyun sektörüne olan hakimiyeti bize “Espor nasıl ortaya çıktı?” sorusunun cevabını vermektedir .Peki espor nasıl yürütülüyor? Ulusal ve uluslararası birçok espor turnuvası düzenlenmekte ve turnuvalar sayesinde oyuncular arası artan rekabet esporun yaygınlaşmasını ve uluslararası alanda tanınmasını sağlamaktadır.</p>

<a name="Espor3"><h1>ESPOR NEDİR 3</h1></a>

<p>Espor alanında en popüler oyunlar  League of Legends, Dota 2, Counter Strike: Global Offensive, Overwatch ve Hearthstone olarak sıralanabilir. Türkiye’de üç büyüklerin League of Legends şampiyonalarına girmesiyle ülkemizin de bu spor dalında yerini almaya başladığını söyleyebiliriz. Ülkemizin espor dalında kazandığı en büyük başarı 2016 yılının Ekim ayında yapılan CS:GO şampiyonasında Arjantin’ 2-1 malum ederek aldığımız şampiyonluk kupasıdır. Takımızı en içten duygularımla tebrik edip ,yıldızı yeni parlayan esporda ülkemizin daha çok başarılar getirmesini temenni ederek yazımı noktalıyorum. Bir dahaki yazımda görüşmek dileğiyle.</p>

    </body>
</html>

Burada dikkat etmeniz gereken kodlamalar şuralardır.

  <a href="#Espor1">ESPOR NEDİR 1</a> <br>
  <a href="#Espor2">ESPOR NEDİR 2</a> <br>
  <a href="#Espor3">ESPOR NEDİR 3</a> <br>


<a name="Espor1"><h1>ESPOR NEDİR 1</h1></a>
<a name="Espor2"><h1>ESPOR NEDİR 2</h1></a>
<a name="Espor3"><h1>ESPOR NEDİR 3</h1></a> 

Gitmek istediğimiz alana a taginin name özelliğine yazdığımız isimle belirliyoruz. Dışarıya nasıl görüneceğini ise a tagi arasındaki değerle belirtiyoruz.

Bu belirlenen bölgelere gitmek içinde istediğimiz yerde a tag’inin href özelliğine name değerini başına # (altgr+3) işaretini koyarak yapıyoruz. 

Nasıl göründüğüne bakalım.

Fazla uzun bir metin girmediğim için tarayıcının genişliğini küçülterek denedim. Burada örneğin ESpor Nedir 3 linkine tıkladığınızda sizi o başlığa odaklayacaktır.

Böylece sayfa içinde istediğiniz yerden istediğiniz yere ulaşabilirsiniz.

Bir sonraki yazımda görüşmek üzere. 

Yorumlarınızı eksik etmeyiniz.

 


muratbilginer